An image sequence on its own is decoration. What makes it a story is the copy that appears at the right moment — a line of text that holds still over the frames, then hands over to the next.
Sticky Sections in the Scroll Sequence widget does that. You give it the CSS ID of a widget and the frame numbers it should be visible between.
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.
Give the content widget an ID
- Add the widget you want to pin — a Heading, a Text Editor, anything — into the same section or container as the Scroll Sequence widget.
- Select it, open the Advanced tab and type a name into CSS ID. Use letters and digits, no spaces, for example
capA. - In the same tab, set Z-Index higher than the sequence’s. The sequence’s own Z-Index, on its Style tab, starts at 0, so anything from 1 upwards puts your content in front.
Set up the sticky section
- Select the Scroll Sequence widget and open Extra Option on the Content tab.
- Turn Sticky Sections on. The toggle reads Show when it is on.
- Click ADD ITEM and fill the row in.
| Field | What to put in it |
|---|---|
| Section ID | The CSS ID you gave the content widget, without the #. |
| Start | The frame number the content should appear on. Frame numbers run from 1 to however many images are in your sequence. |
| End | The frame number it should disappear on. |
| Top (%) | How far down the screen it sits while pinned, as a percentage of the viewport. 10 puts it near the top, 65 about two thirds down. Default 5. |
| Start Animation / End Animation | An optional entrance and exit effect. Both default to None, which makes the content simply appear and disappear. |
Click ADD ITEM again for each further piece of content. Every one needs its own CSS ID and its own row.
How It Behaves
Tested with a 40-frame sequence and two captions — the first set to Start 4, End 14, Top 8%, the second to Start 28, End 38, Top 65%:
By frame 21 the first caption has gone and no caption is shown:
and the second caption takes over further down, lower on the screen because its Top is 65%:
- Between Start and End the content is held at the Top (%) position while the frames keep changing behind it.
- Outside that range it is hidden, and it is hidden again once the visitor scrolls past the whole sequence.
- Scrolling back up brings it back over the same frames.
- Ranges can overlap — two rows whose Start/End ranges cross will both be pinned at once, at their own Top positions.
Limitations
- Start and End are frame numbers, so they only make sense against your own frame count. Change the number of images and every row needs revisiting.
- The field description under Start in the editor reads “in viewport or px”. That text is wrong — the tooltip on the same field, and the behaviour, are frame numbers.
- Sticky Sections only pins content that is inside the same section or container as the widget.
- There is no preview of the pinned state in the Elementor editor; check it on the published page.
Troubleshooting
The content never appears
Check that Section ID matches the widget’s CSS ID exactly, including capitals, and that you did not include the #.
It appears behind the frames
Raise the content widget’s Z-Index on its Advanced tab. The sequence sits at Z-Index 0 by default.
It flashes past
Start and End are too close together, or the section is too short. Widen the frame range, or raise the section’s minimum height so each frame gets more scrolling.
Nothing scrolls at all
The section or container needs a Min Height tall enough to scroll through.
