Fixed page scrolling animation

Design help Animations & Interactions
1

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

I have found a Plugin on Page Scroll Effects | CodyHouse
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.

2 Likes
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.

1 Like
5

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

6

Hello ! Thanks @RHD, I followed your instruction but nothing move when i scroll. I must have forgotten something…
My Link