Image Sequence — Playground

frame 1 / 48 · 0%

pinned full-screen · drag the scroll to scrub

Image Sequence — options

Frames 48

ModePin & scrubScrub while in view

Scroll length (screens) 2

DirectionForwardReverse

FitCover (fill, crop)Contain (letterbox)

Background #0e1524

Subject

The frames here are procedurally rendered so the demo needs no hosted images — but the mechanic is the real one: a preloaded frame setblitted to a <canvas>, scrubbed by the scroll fraction.

Sample options — update as you tweak

// Builder → Media Elements → Image Sequence
'frames_from'  => 'urls',                 // 'uploads' | 'urls'
'url_pattern'  => 'https://site.com/cube/frame_%d.jpg',
'frame_count'  => 48,
'start_number' => 1,
'zero_pad'     => 4,
'mode'         => 'pin',            // pin & scrub | scrub while in view
'scroll_length'=> 2,                 // screens (pinned)
'direction'    => 'forward',
'fit'          => 'cover',
'background'   => [ 'predefined' => '', 'custom' => '#0e1524' ],

On a real site, point Frames from at uploaded frames or a numbered %d URL pattern. The background uses the theme color-preset picker (stored [ 'predefined' => '', 'custom' => '#hex' ]).

Drag the scroll on the right (or hit Play) to scrub through the sequence — the frames are preloaded and drawn to a <canvas>, exactly like the runtime. Pick a subject on the right, then tweak the frame count, mode, scroll length, direction, fit and background. The Sample options update as you go.

Where it lives

Image Sequence is a Media Element — builder palette → Media Elements → Image Sequence → point it at your frames (uploaded, or a numbered %d URL pattern). Pin & scrub pins it full-screen and plays it across the Scroll length; Scrub while in view plays as it passes the viewport. Frames are preloaded for flicker-free scrubbing, and reduce motion shows a single static frame.

← Back to Image Sequence