A scroll sequence plays a set of still images one after another as the visitor scrolls, so the picture appears to animate under their own thumb. Apple and Sony use it on product pages.
The Scroll Sequence widget from The Plus Addons for Elementor builds one from images you already have — no video, no code.
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.
Search for Scroll Sequence under The Plus Addons > Widgets and turn the toggle on:
Build a scroll sequence
- Add a section or a container and drop the Scroll Sequence widget inside it.
- In the Scroll Sequence section of the Content tab, pick where the frames should be drawn with Apply To.
- Choose where the frames come from with Upload Type.
- Give the section or container enough height for the visitor to scroll through — that scroll distance is what plays the sequence.
Apply To
This decides which element the frames are painted over.
| Option | What it does |
|---|---|
| Default | Draws the frames across the section or container the widget sits in. This is the setting most pages want. |
| Body | Draws the frames behind the whole page. Covered in the page body guide. |
| Inner Column | Meant for a single column of an Elementor section. See Limitations below before you use it. |
Upload Type
Gallery takes the frames from your WordPress media library. Click Image Upload and select them; the order in the gallery is the order they play in.
Remote Server builds the frame URLs from a folder you host elsewhere, which keeps hundreds of files out of your media library. It adds Folder Path, Prefix, Digit, Image Type and Total Image.
The full walkthrough is in How to Create Image Sequence Scroll Animation From a URL?.
Extra Option
| Setting | What it does | Default |
|---|---|---|
| Preload Image (%) | Meant to control how much of the sequence is fetched before the animation begins. See Limitations. | 20 |
| Sticky Sections | Pins other widgets over the frames between two frame numbers. Each row takes a Section ID, a Start and End frame number, a Top (%) position and a Start Animation / End Animation. | Hide |
Style tab
| Setting | What it does | Default |
|---|---|---|
| Position | A Custom toggle that reveals Top (%) and Left (%), both 0-100%. | Default |
| Z-Index | Stacking order of the frames against the rest of the page, -10 to 10. | 0 |
| Width / Height | Size of the drawing area, in px or %. | empty |
| Start Offset (px) | Moves the point at which the first frame appears further down the page. | empty |
| End Offset (px) | Adds to the scroll distance the sequence runs over, so it finishes later. | empty |
How It Behaves
The frame shown is worked out from how far you have scrolled through the widget’s section, so it steps forward evenly. On a 40-frame sequence in a container 400vh tall, measured at fixed scroll positions, the visible frame went 1, 6, 17, 28, 38, 40 from the top of the section to the bottom:
Played end to end it looks like this:
- Scrolling back up plays the frames in reverse.
- The taller the section, the more scrolling each frame gets, so the animation feels slower and smoother.
- With no images selected the widget shows No Image Selected! on the canvas instead of rendering.
Limitations
- Apply To > Inner Column does not work in 6.5.0. The drawing area is added to the column but no frame is ever painted — tested in a section column, in an inner-section column and with an explicit column height. Use Default inside a flexbox container column instead, which does work.
- Preload Image (%) made no measurable difference. Two identical 40-frame pages, one at 100% and one at 1%, both requested all 40 frames on the first load.
- The frames are drawn in the browser, so a long sequence is a real download. Compress the images and keep the frame count to what the animation needs.
- Remote Server only accepts a numbered file name pattern — a prefix plus a number plus one extension.
- There is no built-in loop, autoplay or play button. The visitor’s scroll is the only control.
Troubleshooting
Nothing animates, the first frame just sits there
The section or container has no scrolling room. Set a Min Height on it — for an Elementor section, set Height to Min-Height and then a Minimum Height value.
The sequence never reaches the last frame
Clear End Offset (px). A positive value extends the scroll distance, so the run finishes past the end of the page. With Start Offset and End Offset both at 500 on a test page, the sequence had only reached frame 36 at the bottom.
The frames cover my text
Raise the Z-Index of the widgets you want in front, or lower the sequence’s own Z-Index, which starts at 0.
