Sometimes the animation should not be boxed into one section — it should sit behind the whole page while the content scrolls over it.
Apply To > Body in the Scroll Sequence widget does that. The frames are drawn behind everything on the page and step forward as the visitor scrolls the page itself.
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: a page long enough to scroll. In Body mode the whole page is the sequence’s track, so a short page plays the frames almost instantly.
Set it up
- Add a section or container anywhere on the page and drop the Scroll Sequence widget into it. In Body mode it does not matter where the widget sits — the frames are drawn behind the page, not in that section.
- Set Apply To to Body.
- Choose your frames: Gallery from the media library, or Remote Server for a folder of files.
- Leave the widget’s own Z-Index, on the Style tab, at its default of 0.
- Give every widget you want visible a higher Z-Index on its Advanced tab — 1 or more is enough.
The rule is simply that your content’s z-index must be above the sequence’s. Either lower the sequence or raise the content; what matters is the difference, not the exact numbers.
How It Behaves
The frames are drawn in a layer pinned to the top of the window, behind the page. Scrolling the page steps through them. Measured on a 40-frame sequence, the visible frame was 5, 15, 24 and 34 at four points down the page:
- The whole page is the track, so how far you have scrolled the page is how far through the sequence you are.
- Anything with a transparent background will show the frames through it. Give your content sections a solid or semi-transparent background if you want the text readable.
- Only use one Body sequence per page. Two would both try to draw behind the same page.
Limitations
- The frame layer is inserted at the very top of the page body, so a theme element that also pins itself there can end up fighting it for position.
- A short page burns through the whole sequence in a few scrolls. Body mode suits long pages.
- Because the sequence sits behind everything, anything with an opaque background hides it completely for that part of the page.
- Preload Image (%) did not change how many frames were fetched on the first load in our tests.
Troubleshooting
The frames cover the whole page and hide the content
Your content has no z-index of its own. Set Z-Index on those widgets or containers, on the Advanced tab, to 1 or higher.
Nothing shows behind the page
Check that Apply To is on Body and that images are selected. With no images the widget prints No Image Selected! where it sits instead.
The sequence finishes before the page does
That is expected when the page is much longer than the number of frames. Add frames, or use Apply To > Default in one tall section instead.
