Can someone help me with a scroll animation?

I am trying to do a animation for scrolling on my website but I can’t seem to figure out how to do it properly. Basically what I want to do is a fixed scroll. So when you scroll down a bit the entire viewport will instantly slide to the next section. I want the menu to go up out of the view port at 0% opacity and the dots on the bottom to go down and 0% opacity out of the viewport. And then return and be at a 100% opacity when the next section is fully in the viewport!

Anyone suggestions on how to accomplish this? I have searched on both youtube and the univserity but can’t seem to find anything for this specific concept!

Thanks in advance

My preview: https://preview.webflow.com/preview/bass-first-project-907f0f?utm_medium=preview_link&utm_source=designer&utm_content=bass-first-project-907f0f&preview=b23522772aaa778c003f8405dad2f4d8

The behavior you’re describing is often refferred to as “fullpage” because it’s usually handled with the JS library fullpage.js.

And this behavior isn’t really achievable in Webflow with IX2. You can simulate it but it quickly becomes — in my opinion — heavy to maintain (lots of IX Actions, weird layout structure…).

Fullpage.js is faily simple to integrate, a lot of designers are using it with Webflow.

I made a demo of a simple integration with Webflow: http://fullpagejs-template.webflow.io/

Here is the read-only link for it: https://preview.webflow.com/preview/fullpagejs-template?utm_medium=preview_link&utm_source=designer&utm_content=fullpagejs-template&preview=0adf74b4dcb34937922a9c5fc91395a2&mode=preview

Important note: fullpage.js is powerful, there are many ways to integrate it, many many options. Take some time to navigate their examples and learn how to activate the options your need. https://alvarotrigo.com/fullPage/

1 Like