Streaming live at 10am (PST)

Revealing stacked divs with scroll interaction

Hi!

I’m trying to recreate the scroll effect of this website: David William Baum
When I inspect the code of the website I can see that it’s made up out fixed divs, stacked on top of each other using z-index and some Javascript.

In my Webflow project I have several divs, colored differently and also with a stacked z-index. I’ve tried both fixed position like the referenced website, and relative position (repositioning them on top of each other with top position -100% for the second div, -200% for the third div and so on). Yet neither of the options seem to work.

For the scroll interaction I attempted a page trigger on the body. Using the scroll animation to move the divs from 0% to -100% on the Y axis to have them move up. When I click on the different ‘keyframes’ of the animation it seems to work just fine but when I try to enable the Live Preview, it doesn’t seem to work. There is also no percentage shown of the length scrolled.

It doesn’t seem to work and I can’t figure out why. Does anyone have any suggestions? I tried looking at the following projects/topics as for answers but without luck:


Here is my public share link: Webflow - Rose's Portfolio1
(how to access public share link)