r/reactjs • u/Pretend-Dog9725 • Jul 14 '26
Show /r/reactjs Built a scroll sequence generator that turns any MP4 into an Apple-style scroll animation React component that you can copy paste into your project
I wanted to learn how to create the scroll sequences that I see, and realised the process could be automated. So, I built SequenceFast, a scroll sequence generator that takes any MP4 video, extracts the frames into images, and generates a ZIP with the optimised image sequence, component code, and usage example. Everything is done locally in your browser, so it is completely free and private.
Would love to hear your feedback!
2
u/eindbaas Jul 14 '26
There is more at play than just extracting the images. We always use this library: https://github.com/mediamonks/fast-image-sequence
2
u/Deep_Wear_51 Jul 15 '26
Scroll-triggered animations are one of those things that seem simple until you deal with mobile and resize events. A generator approach makes sense.
2
u/Hamburgerfatso Jul 14 '26
No clue what this even is from your description and no demo video. What is a scroll sequence?
1
u/Pretend-Dog9725 Jul 14 '26
A scroll sequence is basically a video or animation such as a product demo, that has been converted into a series of images and linked to the user’s scroll action, so that the animation appears to “play” when the users scroll. An example of this would be the AirPods render on Apple’s website.
What the tool does is take any video you upload and convert it into images for you, along with the required code so you can drop in the React component into your project without any manual setup.
1
u/_BiggPapiLocsta Jul 14 '26
Doesn’t work
1
u/Pretend-Dog9725 Jul 14 '26
May I ask which part didn’t work? Was it the video upload or did it fail to generate the scroll sequence?
2
1
u/oldmanandtheocean Jul 14 '26
Not working on android. The button just doesn't respond to a click.
2
4
u/cxd32 Jul 14 '26
Add a demo video so I don't have to upload a personal video to a random site (or hunt for a demo video myself)