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:
- https://webflow.com/website/Horizontal-Scroll-Layout-Example-with-Active-Menu?ref=showcase-search&searchValue=horizontal#
- Stacking cards on scroll
- Card Stack : Scroll Effect. Accidents are notorious and mischievous… | by sanjeev yadav | Medium
Here is my public share link: https://preview.webflow.com/preview/roses-portfolio-1d9a55?utm_medium=preview_link&utm_source=designer&utm_content=roses-portfolio-1d9a55&preview=84f0396f139c993cfca57166eceb4efe&workflow=preview[1]
(how to access public share link)