Skip to content

How to Create Image Sequence Scroll Animation From a URL?

Table Of Content

A smooth scroll sequence can run to hundreds of frames. Putting all of them in the WordPress media library makes it slow to browse and awkward to back up.

The Scroll Sequence widget can read the frames straight from a folder instead — your own server, an S3 bucket, any host that serves the files over HTTPS.

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: your frames uploaded to a folder you can reach over HTTPS, named in a single numbered pattern — 1.jpg, 2.jpg, 3.jpg or frame-001.jpg, frame-002.jpg and so on. The folder has to be publicly readable.
  • 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.

Name the files first

The widget builds each frame’s address itself, so the file names have to follow one pattern: an optional prefix, then a number, then the extension. frame-01.jpg through frame-40.jpg works; frame-1.jpg, frame-02.jpg does not, because the number of digits must be the same in every name.

Supported image types are JPG, PNG and WebP. Every frame in the folder has to use the same one.

Point the widget at the folder

  1. Add the Scroll Sequence widget to a section or container.
  2. Set Upload Type to Remote Server.
  3. In Folder Path, paste the folder’s address with no file name and no trailing slash — for example https://files.example.com/product-spin. The widget adds the slash before the file name itself.
  4. In Prefix, type whatever comes before the number. For frame-01.jpg that is frame-. Leave it empty if your files are just 01.jpg.
  5. Pick Digit to match the padding in your file names: 1-9, 01-99, 001-999 or 0001-9999.
  6. Set Image Type to JPG, PNG or WebP, matching the real extension.
  7. Put the number of frames in Total Image. It starts at 20 and goes up to 5000.
The remote server fields filled in: folder path, prefix, digit and image type

The widget starts counting at 1, so your first frame must be numbered 1, not 0.

Give it room to scroll

As with the gallery route, the animation is driven by the height of the section or container the widget sits in. If that area is short, set a Min Height on it under Layout; on an older Elementor section, set Height to Min-Height and then a Minimum Height.

How It Behaves

With 40 frames served from a folder, Prefix frame-, Digit 01-99, Image Type JPG and Total Image 40, the sequence ran frame 1 near the top of the section, frame 21 in the middle and frame 40 at the bottom:

Front end mid-scroll, showing frame 21 of a 40-frame sequence loaded from a remote folder
  • Remote and gallery sequences behave identically once loaded. Only where the files live differs.
  • Frames are fetched by the visitor’s browser, so the folder has to allow direct access. A host that blocks hotlinking or requires a signed URL will not work.
  • Frame numbers that do not exist simply fail to load and are skipped over, so an over-large Total Image leaves gaps in the animation.

Limitations

  • Only one naming pattern is supported — prefix, fixed-width number, single extension. Mixed extensions or mixed padding will not load.
  • There is no preview of the remote frames in the Elementor editor’s gallery, so a typo in the path only shows up on the published page.
  • Frames served from another domain need CORS and hotlink protection to allow your site.
  • Preload Image (%) did not change how many frames were fetched on the first load in our tests.

Troubleshooting

Nothing is drawn at all

Open one frame’s address directly in a browser tab — take the Folder Path, add a slash, the Prefix, the first number with the right padding and the extension. If that URL does not show the image, the widget cannot load it either.

Only some frames appear

The Digit setting does not match the file names, so the padded numbers the widget builds only match part of your set. Match the padding exactly.

The animation stops partway

Total Image is higher than the number of files you actually uploaded.

It works on your machine but not for visitors

The folder is probably not public. Check the permissions or the bucket policy on the host.

Related Docs

Related Frequently Asked Questions

Related Docs