Image Sequence on Scroll

Hello,

I am trying to implement a mobile-friendly concept which would enable a user to scrub through a sequence of images on scroll.

What I’ve laid out is the following: a series of images piled on top of each other, each subsequent frame featuring a lower z-index value than the previous one, all in a fixed position. There would be a div block which extends to a large multiple of the viewport size, 2000vh, shall we say.

These images need to be told what to do through the Interactions tool, and I can’t seem to figure out how to configure that.

I am thinking of assigning some kind of opacity-controlling page-trigger interaction set to “While Page is Scrolling”; here, an animation will be created, whose scroll action controls the opacity of each and every image in the sequence, bringing it from 100% to 0% instantly.

I think it’s possible, what do you guys think? Maybe there is a way to add every image at once?


Here is my public share link: LINK
(how to access public share link)

Why not just stack a bunch of sections and set each to 100vh and apply a fixed background image to each one set to cover. You’ll end up with a vertical wiping effect as you scroll. You can also add down arrow buttons to each with anchor links if you’d like.

Bonus is once you get this figured out, you could potentially feed the images from a collection using a dynamic list.

You can’t use fixed background images on mobile so that’s not appropriate in this case. The interactions tool is the only way to get them to stay fixed during scroll on mobile as far as I know.

Also the dynamic is not usable in this case as I am exporting the code.

I’ve found this tool. I’m still trying to understand how to implement custom code into my Webflow project. GitHub - ghepting/javascript-video-scrubber: A demonstration of how to scrub through a video (JPEG sequence) with native window scrolling position (As seen on NikeResponsibility.com)