I’m trying to recreate the scroll effect of this website: David William Baum
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:
- horizontal-scroll-layout-example-with-active-menu - Webflow
- Stacking cards on scroll
- Card Stack : Scroll Effect. Accidents are notorious and mischievous… | by sanjeev yadav | Medium