Stacking fixed images on scroll

Hi there,

I’m working on adding a new section to my website where I’d like to reveal images as you scroll down. I’ve come across tutorials on this, but they usually involve images that scroll along with the page. What I’m actually looking for is an effect where the images remain fixed in place on the page and essentially stack on top of each other as you scroll down. Once all the images are stacked, the entire section containing the images can then scroll back up and out of the screen.

I hope I explained myself well, since I cannot find an example website right now.


Here is my public share link: (Webflow - Copy of CAYA Studios)

hi @martijnmendel you can find these tutorials on YT. when you goggle keywords " stacking images scroll webflow" there is several links to videos about this effect. I believe there are some examples in “Made in Webflow” too :person_shrugging:

@martijnmendel just set the position of the image sticky and at top zero your image will be fixed on the scrolling
image
Good luck!

Thank you! The only difference between what I can find in these tutorials - and setting the position of image sticky, is that I don’t want the images to scroll on the page. I just want them to appear out of nowhere if you scroll down.

I have made the effect now with using sticky on an image and then using an Interaction that turns from 0% to 100% when the sticky hits, but I don’t think this is the most effective way to do it.
Check it here:
https://caya-new.webflow.io/

READ ONLY:
https://preview.webflow.com/preview/caya-new?utm_medium=preview_link&utm_source=designer&utm_content=caya-new&preview=5347023d3a157c7b77f8821c09d3ed32&workflow=preview