--- title: "How to Create Image Sequence Scroll Animation From a URL?" url: https://theplusaddons.com/docs/create-image-sequence-scroll-animation-from-a-url/ date: 2023-05-09 modified: 2026-09-19 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2023/05/How-to-Create-Image-Sequence-Scroll-Animation-From-a-URL_-1024x536.jpg word_count: 802 --- # How to Create Image Sequence Scroll Animation From a URL? ## - The Scroll Sequence widget reads frames straight from a folder over HTTPS, including your own server or an S3 bucket, instead of requiring every frame in the WordPress media library. - The Plus Addons for Elementor Pro ships the Scroll Sequence widget only in Pro, and the widget disappears from the page entirely when the Pro plugin is switched off. - Scroll Sequence requires one fixed naming pattern with the same digit padding, such as frame-01.jpg through frame-40.jpg, and it supports JPG, PNG, and WebP with one extension per folder. - Scroll Sequence counts from 1 and uses the section or container height to drive the animation, so a short area needs a Min Height and an over-large Total Image leaves gaps when files are missing. 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](https://theplusaddons.com/docs/scroll-sequence-elementor-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/image-scroll-sequence/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## 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 - Add the **Scroll Sequence** widget to a section or container.- Set **Upload Type** to **Remote Server**.- 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.- 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*.- Pick **Digit** to match the padding in your file names: **1-9**, **01-99**, **001-999** or **0001-9999**.- Set **Image Type** to **JPG**, **PNG** or **WebP**, matching the real extension.- 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](https://theplusaddons.com/wp-content/uploads/2026/09/scrollsequence-remote-server.webp) > *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](https://theplusaddons.com/wp-content/uploads/2026/09/scrollsequence-result-frame21.webp) - 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 - [Scroll Sequence Elementor Widget Settings Overview](https://theplusaddons.com/docs/scroll-sequence-elementor-widget-settings-overview/)- [How to Create Image Scroll Animations like in Apple, Sony in Elementor?](https://theplusaddons.com/docs/create-image-scroll-animations-like-apple-sony-in-elementor/)- [How to Convert Videos to Images Files?](https://theplusaddons.com/docs/convert-videos-to-images-files/) ## Frequently Asked Questions **Q: What do I need before creating an image sequence scroll animation from a URL?** A: The main requirements are a Pro install of The Plus Addons for Elementor and a public folder that serves the frames over HTTPS. The widget only works when the Scroll Sequence widget is enabled under The Plus Addons > Widgets, and the frames must already be uploaded in a single numbered pattern like 1.jpg, 2.jpg, 3.jpg or frame-001.jpg. Give the section or container enough height too, because the animation is driven by scrolling space. **Q: Why are my remote image sequence frames not loading in Elementor?** A: The most common failure is a bad direct URL. The widget builds each frame address from the folder path, prefix, number, and extension, so one wrong piece breaks the load. A quick test is to open one frame URL directly in a browser tab. If that image does not open there, the widget cannot fetch it either. This also catches public-access problems on the host before you troubleshoot Elementor itself. **Q: What file naming pattern does an image sequence need for scroll animation?** A: The frames need one consistent pattern: optional prefix, fixed-width number, then one extension. Examples like frame-01.jpg through frame-40.jpg work because every number uses the same padding. Mixed padding such as frame-1.jpg and frame-02.jpg will not load correctly. The page also says every frame in the folder has to use the same image type, with JPG, PNG, or WebP supported. **Q: Can I use an image sequence stored on another server or S3 bucket?** A: The Scroll Sequence widget can read frames from your own server, an S3 bucket, or any host that serves files over HTTPS. The important part is direct browser access to the folder. If the host blocks hotlinking or requires a signed URL, the sequence will fail because the visitor’s browser fetches each frame directly. For another domain, CORS and hotlink protection have to allow access. **Q: How much scrolling space does an image sequence animation need?** A: It needs enough vertical room in the section or container where it sits, because scroll distance drives the frame changes. If that area is short, set a Min Height so there is something to scroll through. On older Elementor sections, the page notes using Height set to Min-Height and then a Minimum Height. Without enough room, the sequence can feel stuck or barely move. **Q: What should I do if only some frames appear in my scroll sequence?** A: That usually means the Digit setting does not match your file names. The widget builds padded numbers from that setting, so if your files are 01-99 but Digit is wrong, only part of the set will match. Another common cause is setting Total Image higher than the files you actually uploaded, which creates gaps because missing frame numbers are skipped over.