Fixed Vertical Section Scroll in Webflow

🖐 Check out my Webflow templates: robn.link/templates
🤙 Try out Webflow using my affiliate link: webflow.grsm.io/robin
Subscribing to Webflow through the affiliate link above will give me a commission, which helps me lots. Thank you so much.
This video will show you how you can create a really cool vertical fixed section scroll animation in Webflow. All sections are actually stacked on top of each other because of their fixed position (and different z-indexes) and are then animated upwards (0% to -100% on the Y-axis) while scrolling in view.
It actually creates kind of a sweet effect that I really enjoy hehe. I hope you do to.
🖐 Portfolio: shapedbyrobin.com
🖐 Twitter: / shapedbyrobin
🖐 Instagram: / shapedbyrobin
🖐 Webflow: webflow.com/robingranqvist
🖐 Dribbble: dribbble.com/robingranqvist

[@kdcan724cnls4]

Thanks, love watching your tutorial, easy to follow and short, but straight to the point!

[@hosseinpouladrag7466]

Thank you man.

[@ihsaan7807]

Smooth stuff.

[@izac7442]

thanks man

[@shubhamparekh9808]

Awesome ❤️

[@mariaarkadieff1572]

Hey! Thank You very much. This IS what i was looking for. But it would be more efficient for me if You complete window was in view. Like this i need to scroll back again very often to check what element exactly is selected.
Thanx again! :)

[@twbashar]

Very Cool :)

[@olgaperesunko1301]

Thank you for this video. Super!
I'm looking from Ukraine

[@mariaarkadieff1572]

Also when You select something maybe wait 1 sec before You klick so people can find the spot easier when scrolling back or forward :)

[@tsvetomiraivanova294]

Thanks for the video! I have a problem though, I am trying to use this scroll for a section in the middle of the page and the content stays static from the top of the page...how do I fix that?

[@jonathanT9801]

Hi Robin is there a way to do this with CMS items? Thank you!

[@Lortsaf]

can you make a video showing how to do this same animation but in reverse meaning the sections scroll from down to up

[@shapedbyrobin]

Good idea! I'll try to make one in the upcoming days 🤙

[@hannahmeads6506]

@@shapedbyrobin would it be a case of setting the section to hidden overflow, then changing the animation to move from 0% to +100%?

[@louhaveman]

Maybe an experience webflow user can follow, but for me with limited skills, I lost you after a couple of minutes.

[@Lortsaf]

You can simplify it by just thinking the z index is so they lay on top of each other and the animations is just saying while page is scrolling move the section -100%
so out of view and and the keyframe is just 3 section / 100% /3 = 33% for each slide