A scroll sequence is not a video. It is a run of numbered still images that the browser steps through as the visitor scrolls, which is why it can go backwards and stop wherever the scroll stops.
So if your animation exists as a video, the first job is to split it into frames.
To check the complete feature overview documentation of The Plus Addons for Elementor Scroll Sequence widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Scroll Sequence widget ships only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget’s output disappears from the page entirely.
- Widget to enable: Scroll Sequence, under The Plus Addons > Widgets. Search for it and turn the toggle on.
- Prerequisite: the animation as a video file — a render, a screen recording or a short clip. Trim it to the part you actually want to play on scroll before you convert it.
How many frames do you need?
- Frames are what the visitor downloads, so the count is your page weight. Thirty to sixty is usually enough for a smooth run.
- More frames over the same scroll distance means smoother motion; fewer frames means the animation steps visibly.
- You can also stretch a small number of frames by giving the section a taller minimum height, but that makes each frame hold longer rather than making the motion smoother.
Split the video into frames
Any tool that exports a video as an image sequence will do — a video editor, ffmpeg, or a browser-based converter such as Aspose’s video-to-image tool. Using that one as the example:
- Drag your video file into the Upload your file area.
- Set Start Time and End Time to the part of the clip you want.
- Set the Frame rate — the number of images produced per second of video. At 5 per second, a six-second clip gives 30 frames.
- Pick the output format under Save as. Choose JPG, PNG or WebP, since those are the three the Scroll Sequence widget reads.
- Click Convert, wait for the upload and conversion to finish, then click Download Now and unzip the result.
The download arrives as a zip; extract it to get the individual frames.
Name the frames for the widget
How you name them depends on which route you use in the widget.
- For Upload Type > Gallery, the names do not matter. What matters is the order you add them in the Image Upload control — that is the play order.
- For Upload Type > Remote Server, the names do matter: an optional prefix, then a number with the same number of digits in every name, then the extension. frame-001.jpg to frame-040.jpg is fine; frame-1.jpg mixed with frame-02.jpg is not. Numbering starts at 1.
Compress the frames before you upload them. Forty uncompressed PNGs will outweigh the rest of the page many times over.
Limitations
- Browser-based converters upload your video to someone else’s server. For anything confidential, export the frames locally from a video editor instead.
- Most free converters cap the clip length or the frame rate.
- The Scroll Sequence widget reads JPG, PNG and WebP only. An export in any other format has to be converted again.
- The steps above describe a third-party tool that we do not control; its interface may have changed since these screenshots were taken.
Troubleshooting
The exported frames are different sizes
Export at a fixed resolution. Frames of different shapes will jump around inside the widget’s drawing area.
Remote Server only plays some of the frames
The numbering is not padded consistently. Rename them so every file has the same number of digits, then set Digit in the widget to match.
The page got very heavy
Lower the frame rate, trim the clip, or re-export at a smaller resolution. You rarely need more than the width the sequence is actually displayed at.
