Streaming live at 10am (PST)

Make FullPage.js to Work on Specific Parts of a Website

Hello everyone. I’ve honestly been trying to figure this out on my own or find any topic which would answer my question, but haven’t found anything. Therefore you guys are my last chance…

Here is the review link: Webflow - FullPage JS
Here is the live link: https://eugenes-fantabulous-project-586f9d.webflow.io/

The effect I want to achieve is this:

I want to have the full page snapping on scroll (FullPage JS) to happen on specific parts of my website. In the link I’ve shared you can see that there are 3 main divs called: “First part”, “Second part” & “Third part”. The first one has 2 sections which are supposed to “snap” to the screen. And as you can see on the published website, it’s working fine. Both of the sections are snapping. The second section is supposed to be a “sticky section” with a sticky part. The third one is supposed to work the same way as the first one.

So the idea here is that when you go to the website, you see the “First part” with the first section with the phrase: “Section 1” - when you scroll one time and it snaps the second section with the phrase: “Section 2”. AND then the “snapping” should turn off so that you can scroll through the “Second part” without any problems so that the sticky animation works as expected. THEN, when the “Second part” ends, the snapping should be turned on so that sections #3 and 4 snap to each other the same way as the sections from the “First part”.

Any suggestions on how to make it work? So to simplify it, I want the FullPage JS to work on specific sections of my website. If I need to reconfigure the website structure, please, let me know. Also, I’ll probably need to change something in the custom code section, so if you can tell me what exactly, I WOULD TRULY appreciate it. because I honestly don’t know what to do.