Change jpeg sequence with scroll position

Hi there,

I would like to show different images when scrolling down, similar then a video sequence but the sequence should be connected with the scroll position.

The images are a sequence of 30 jpegs which should be shown in the right order when scrolling down.

Does anyone knows a good tutorial on how to do that?

A hint or some example code would be very helpful :slight_smile:

Thank you for answers!

check this maybe: https://scrollmagic.io/
I saw some web agencies using it for their own websites

I already read about scroll magic and as far as I know this is an add on for the GSAP library. I know that a lot of developer use it, but the performance is not that great and I would prefer to develop it only with react js.

I found a lot of examples with vanilla js, for example this one:

But I am not sure how to convert this code to react syntax. I think it sould be not that hard to develop it in react.js. All I need is the function to update an image sequence when the scroll position changes.

Maybe someone knows a react boilerplate I can use?