Image sequences

Turn a folder of frames into a sequence that plays as the visitor scrolls, held on screen if you want, with a still frame for reduced motion.

Updated10/26/2026

An image sequence is a set of frames, such as a product turning or a building rising, drawn one at a time as the page scrolls. It takes two pieces: the Image sequence element, which holds the frames, and the Image sequence on scroll scene, which ties the frames to the scroll. This page goes from a folder of frames to a published sequence.

Before you start #

You need the Content editor or Super admin role.
Prepare the frames as JPEG, PNG, GIF or WebP files, all the same size, named so that their order sorts by name: frame-1.webp … frame-72.webp works, because the order is natural (frame-2 comes before frame-10).
Keep the count and the weight down. A sequence draws at most 240 frames, and every frame is downloaded by every visitor who opens the page. As a reference, the Libretto landing uses 72 frames at 1280×800 in WebP, under 45 KB each.
Put the frames in one .zip file, without folders inside it.

Upload the frames #

In the site's sidebar, open Media.
Choose Upload files, or drop the .zip on the page. A zip of images becomes a folder named after the zip, with the images in file-name order.
Wait for Uploaded in the uploads list.

The zip may hold up to 300 images, and the whole file up to 200 MB. Each image inside has the same 5 MB limit as a single upload: one larger image stops the whole zip. Anything that is not a JPEG, PNG, GIF or WebP image (folders, __MACOSX files, dotfiles, SVGs, PDFs) is left out, and the list says "… entries of … are not images and were left out".

Add the sequence to the page #

Open the page in the editor. In Layers, choose Insert with a section selected, or Add section for a new section.
In the Add panel, search for "Image sequence" and choose Image sequence.
In the inspector, fill Alternative text: what the sequence shows, for visitors who cannot see it. It is required.
Under Frames, add the frames. In the media picker, choose the folder in Folder, then Select all in this folder, then Select …. The frames are added in file-name order.
Set Fit: Fill crops the frames' edges to fill the element (the default), Whole shows every frame entire.
Give the element its size and proportions in the Styles tab, like any other element.

Until there is a scene, the element shows its first frame and does not move.

Make it play on scroll #

With the image sequence selected, open Motion, choose Add a scene, then Image sequence on scroll.
Set the knobs:

Knob	What it means
Starts after	When the first frame starts to change, in screens. 0: when the sequence reaches the top of the screen. -1: when it comes in from below.
Ends after	When the last frame is reached, in screens counted the same way. It is always at least a quarter screen after the start.
Held on screen while it plays	Yes pins the sequence in place while the frames run, then lets it scroll away. No lets it scroll with the page.

Scrub it with the slider in the preview's Motion bar to check the whole run.

A longer range plays the frames more slowly. With Held on screen while it plays on Yes, the range is also how long the sequence stays pinned, so 2 screens means the visitor scrolls two screen heights through it.

Frames from an address pattern (advanced) #

If the frames are hosted at numbered addresses, open the advanced fields instead of listing them:

Frame address pattern: the address with {n} where the number goes, such as /media/turn/frame-{n}.webp.
Number of frames: 2 to 240.
First frame number: the number of the first frame.
Digits in the number: 3 writes 007; 0 writes the number as it is.

Pattern frames come after any frames listed under Frames, and the total is cut at 240.

What you see #

Before the page's scripts run, and for visitors without JavaScript, the first frame shows as a normal image with its alternative text.
Once the frames start loading, a canvas takes the image's place and draws the frame that matches the scroll. The frames load first and last, then the frames in between, a few at a time; until a frame has arrived, the nearest loaded one stands in.
Visitors with reduced motion see the last frame, still. Tick Reduce motion in the preview's Motion bar to check it.

Pitfalls #

Pitfall: An empty Alternative text blocks the publish: it is a required field. Describe what happens in the sequence ("The chair turns a full circle"), not "animation".

Every frame starts downloading as soon as the page opens, not when the visitor reaches the sequence. A heavy sequence slows the whole page on mobile. Check Motion load in the top bar and test on a phone-sized preview.
Frames picked by hand are added in the order you pick them. Use Select all in this folder to keep the file-name order.
Frames of different sizes jump as they play. Export them all at the same size and crop.
With Fit on Fill, the frames' edges are cut when the element's proportions differ from the frames'. Set the element's ratio to the frames' ratio, or use Whole.
In the Edit preview mode some blocks hold still. Switch Preview mode to Live to see the pinning as a visitor will: in Edit the sequence still plays as you scroll, but nothing is pinned.

Something wrong on this page? Write to docs@librettocms.com.