web_scroll_triggered_image_sequence Shortcode
The web_scroll_triggered_image_sequence shortcode creates a full-height, scroll-controlled scene from either an image sequence or one self-hosted video. The media stays pinned while scrolling advances through the selected frames or video timeline.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Allowed child shortcodes: web_scroll_triggered_image_sequence_text.
Usage
[web_scroll_triggered_image_sequence source_type="video" video_url="https://example.com/scene.mp4" image_fit="cover"]
[web_scroll_triggered_image_sequence_text title_text="The first chapter"]
[/web_scroll_triggered_image_sequence_text]
[/web_scroll_triggered_image_sequence]In Page Builder, add Scroll triggered media, select Image sequence or Video under Source type, and then complete the source field that appears.
Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
source_type |
images |
images, video |
Selects the image-sequence or video rendering mode. Existing shortcodes remain in image-sequence mode. |
images |
— | Page Builder image-sequence payload | Supplies the ordered frames when source_type="images". |
video_url |
— | HTTPS self-hosted video URL | Supplies one progressive video when source_type="video". WordPress media URLs and Pomatio Video Hosting logical URLs are supported. |
image_fit |
cover |
cover, contain |
Makes the selected media cover the scene or remain completely visible within it. The attribute name is retained for backward compatibility. |
animation_speed |
3.5 |
Number from 0.5 to 20 |
Controls the pinned scroll distance. Higher values require more scrolling and make the media advance more slowly. |
spinner |
WordPress loading image | HTTPS image URL | Replaces the loading indicator shown until the first frame is ready. |
device_visibility |
— | Responsive visibility rule | Applies the selected responsive visibility rule. |
el_class |
— | Space-separated CSS classes | Adds custom classes to the canvas or video element. |
Choosing a source
Use an image sequence when individual frames must be art-directed or when exact frame-by-frame changes matter. Keep every frame at the same dimensions and aspect ratio, use a consistent filename order, and optimize the files before publishing.
Use video for smoother motion and simpler editing. The URL must resolve to a browser-playable progressive video with seeking support. Pomatio Video Hosting logical URLs work when that asset has completed progressive generation. The shortcode keeps the video muted, does not autoplay it, and maps scroll progress to its timeline.
Enclosed content
Add web_scroll_triggered_image_sequence_text children in the order they should appear. The first child is visible initially; later children crossfade as the visitor advances through the scene.
Customize the stylesheet
Go to Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Scroll-triggered image sequence to compare the current scroll-triggered-image-sequence.min.css source with an editable version. Saving creates a minified per-site replacement for the existing web-scroll-triggered-image-sequence handle. The web_scroll_triggered_image_sequence script, first-frame priority, near-viewport loading, pinned scroll timeline, canvas and video calculations, spinner, nested text stages, shortcode attributes, and conditional loading remain unchanged. Revert to theme CSS removes the replacement and restores the current theme asset.
Verification
- Confirm the first frame appears without scrolling and the loading indicator disappears.
- Scroll through the complete scene and confirm the media reaches its final frame without leaving gaps.
- Confirm every text child appears in the intended order and reverses correctly when scrolling upward.
- Check both a desktop and a phone-sized viewport, especially when using
contain. - For video sources, confirm seeking works after a fresh page load and that no audio or playback controls appear.
If a video scene remains empty, open the URL directly and confirm it produces a progressive video rather than an HLS manifest or an unfinished Pomatio Video Hosting asset. If an image scene jumps between frames, verify that every selected URL is publicly readable.