On an Apple or Sony product page the product turns, opens or lights up as you scroll. There is no video playing — it is a run of still frames stepped through by your scroll position.
The Scroll Sequence widget from The Plus Addons for Elementor does the same thing from a folder of images.
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: a numbered set of images, one per frame. JPG, PNG and WebP are the formats the widget offers. More frames means a smoother animation and a heavier page — 30 to 60 frames is a practical range.
- Prerequisite: enough scrolling room. The sequence is driven by the height of the section or container it sits in, so if that area is short, set a Min Height on it — otherwise there is nothing to scroll through.
Get your frames
Start from the animation itself — a turntable render, a screen recording, a short clip of the product. Export it as numbered still images. If all you have is a video file, convert it to image files first.
Keep the frames the same size and aspect ratio, and compress them. Forty frames at 100 KB is 4 MB the visitor has to download.
Build the sequence
- Add a section or container and drop the Scroll Sequence widget in it.
- Leave Apply To on Default so the frames fill that section.
- For a handful of frames, leave Upload Type on Gallery and pick them in Image Upload. For a long sequence, choose Remote Server and point it at a folder.
- Give the section room to scroll. On a container, set Min Height under Layout; on an Elementor section, set Height to Min-Height and then a Minimum Height.
Add the copy
Two ways to put text over the animation:
- Sticky Sections pins a widget over the frames between two frame numbers, so a line of copy appears and leaves at the moment you choose. That is the closest match to the Apple pages.
- Or just drop other widgets into the same section. They scroll normally while the frames play behind them.
How It Behaves
The frame shown comes from how far the visitor has scrolled through the section. Here is the same page at three scroll positions — near the start, in the middle, and near the end:
and near the end of the section:
- Scroll back up and the frames run backwards.
- A taller section spreads the same frames over more scrolling, so the animation feels slower and smoother. A short section makes it snap.
- The sequence is tied to the scroll only — there is no autoplay, loop or play button.
Limitations
- Every frame is downloaded by the browser, so the frame count and file size are your page weight. Trim the sequence to the frames that carry the motion.
- Preload Image (%) did not change how many frames were fetched on load in our tests — a 40-frame page requested all 40 at both 1% and 100%.
- The frames fill the section, so a frame whose aspect ratio differs from the section will be letterboxed.
- Apply To > Inner Column does not paint anything in 6.5.0. To put a sequence beside text, use a flexbox container with two columns and leave Apply To on Default in the column that holds the widget.
Troubleshooting
The animation jumps instead of gliding
Either the section is too short for the number of frames, or there are too few frames. Raise the Min Height of the section, or export more frames.
The first frame shows but nothing moves
The section has no scrolling room of its own. Set a minimum height on it.
The page is slow to load
Compress the frames, drop the resolution to what is actually displayed, and move a long sequence to Remote Server so the files are not in your media library.
