Streaming live at 10am (PST)

Fixed page scrolling animation


#1

Hi all,
I’m trying to make a full page transition whilst scrolling like this:


I have found a Plugin on https://codyhouse.co/demo/page-scroll-effects/fixed.html
Could anyone show me how to use this plugin, or if possible, recreating that effect without codes?
Thank you.


Here is my public share link: LINK


#3

Hey @quannguyenjn,

This is absolutely do-able in Webflow without the plugin, with just a little bit of custom code:

  1. Insert a div, give it a class e.g. sections-wrapper and nest all of your cd-section elements inside of it

  2. Insert a HTML Embed element inside of the sections-wrapper and paste the following code:

save image

  1. Set the position of cd-section to relative and set the top position to 0px

Position

  1. Finally, give each cd-section a combo class (1, 2, 3, 4, 5 etc.) and give each consecutive section a higher z-index than the previous i.e.the first section could be z-index 1, next section z-index 2 etc.

And that should be you set! If everything works, each time a section reaches the top of the viewport it should stick as the next section (with a higher z-index) continues to scroll up overlapping it.

Let me know how you get on.


#4

Thank you so much Ryan @RHD, you’ve saved me from a bunch of problems. I’ve done implementing the plugin from codyhouse, but when switching to mobile devices there were errors.
For the z-index part i haven’t yet set but it has worked perfectly.


#5

Awesome - no worries at all @quannguyenjn. Glad I could help!