015
AI ready

Scroll Image Sequence

£5

Cinematic canvas frame scrubbing with an expanding aperture, synchronized caption crossfades, and reversible scroll progress.

ScrollTrigger Lenis intermediate
6 more details
scrubcanvaspinningimage-sequencemask-revealscroll-storytelling
Scroll Image Sequence - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Scroll Image Sequence demo in new tab

About this effect

A scroll-driven image sequence effect that draws numbered frames to a responsive canvas while one GSAP timeline expands a viewing aperture, crossfades story captions, and tracks progress. ScrollTrigger pins only for the configured journey and keeps every response fully reversible.

What's included

9 items
  • Canvas-cover frame rendering without image distortion
  • Configurable rounded mask that expands to full bleed
  • Timeline-synchronized caption crossfades with a persistent final state
  • Transform-based journey progress driven by the same timeline
  • Automatic preloading with live status and nearest-frame fallback
  • HiDPI canvas sizing with debounced responsive refresh
  • Shorter mobile scroll distance using the same real frame sequence
  • Representative-frame reduced-motion and no-JavaScript fallbacks
  • Single-clock Lenis and ScrollTrigger integration with complete cleanup

Perfect for

5 use cases
  • Architectural approach sequences with location storytelling
  • Product launches with controlled full-bleed reveals
  • Travel editorials with timed captions over footage
  • Automotive or aerospace sequences with scrubbed rendered frames
  • Portfolio case studies that need reversible cinematic playback

How it works

2 sections

The effect preloads a configurable numbered image set and uses a GSAP timeline with ScrollTrigger scrub to animate a frame-index object from the first frame to the last. Each update draws the nearest available image into a HiDPI canvas using a centered cover crop, while optional mask, hero, chapter and progress elements share the same normalized timeline.

The section pins for the supplied desktop or mobile distance and releases as soon as the sequence reaches its final frame. Reduced-motion visitors receive a representative static frame without pinning, and a real fallback image keeps essential content visible when JavaScript is unavailable.

Plugins ScrollTrigger
Difficulty Intermediate
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Scroll Image Sequence opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add the effect markup to your <body>:

Code snippet omitted: it ships with the download.

Keep a real fallback <img> beneath the canvas. It supplies the no-JavaScript state and prevents a blank stage while frames load. Point it at the frame the sequence opens on, as the demo does, and the handover to the canvas is invisible.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

Lenis is optional. If present, the effect connects Lenis and ScrollTrigger to the same GSAP ticker. Set data-smooth="off" on <html> or use ?smooth=off to disable it.

Options

Attribute Values Default Description
data-image-sequence — — Marks each sequence container (required)
data-frame-path Relative or root-absolute URL /assets/frames/frame_ Path and filename prefix before the padded number
data-frame-count Integer 120 Number of frames to preload
data-frame-pad Integer 3 Number width; 3 produces 001
data-frame-ext .jpg, .png, .webp .jpg Frame extension, including the dot
data-scroll-length ScrollTrigger end value 300% Desktop pin/scrub distance
data-scroll-length-mobile ScrollTrigger end value 220% Optional shorter distance at 768px and below
data-scrub Number, including 0 0.5 ScrollTrigger scrub smoothing
data-mask true, false false Animates [data-mask-viewport] from the CSS aperture to full bleed
data-chapters true, false false Enables timed [data-chapter] overlays
data-chapter-start 0–1 Based on order Chapter fade-in point on the sequence
data-chapter-end 0–1 Start + 0.2 Chapter fade-out point; use 1 to keep the final chapter visible

Frame paths in local and public builds

The script uses data-frame-path exactly as supplied:

  • /assets/frames/frame_ resolves from the site/public root and requests /assets/frames/frame_001.jpg.
  • assets/frames/frame_ resolves relative to the page URL, which is useful when frames ship beside a standalone page.
  • A CDN URL such as https://cdn.example.com/flight/frame_ works without rewriting.

The fallback image should use the same deployment strategy as the sequence frames.

Preparing Frames

Use consistently sized images and keep the sequence as small as practical. For example:

Code snippet omitted: it ships with the download.

The renderer uses a centered canvas-cover crop at every viewport size. A missing frame falls back to the nearest successfully loaded frame rather than clearing the canvas.

Accessibility

  • The canvas is decorative; provide meaningful alt text on the fallback image beneath it.
  • Keep essential location, product, or story context in ordinary HTML, as the demo does with .static-context.
  • The loading element uses aria-live="polite" and is hidden after preloading completes.
  • Under prefers-reduced-motion: reduce, the effect does not pin or scrub. It draws a representative middle frame and leaves static context visible.
  • Without JavaScript, the fallback image and the opening copy remain visible, so the section is never blank.
  • This scroll-driven effect has no custom pointer-only controls; normal keyboard and assistive scrolling continue to work.

Dependencies

Required:

  • GSAP 3.15.0+
  • ScrollTrigger

Optional:

  • Lenis 1.3.17+ for smooth scrolling

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Related articles

GSAP performance: why animations get janky and how to fix it

A GSAP performance guide: keep tweens on the compositor, batch ScrollTriggers, sync smooth scroll to one clock, and stop pinned sections jumping.

Apple-style scroll image sequences with GSAP and canvas

Build a scroll-driven image sequence with GSAP ScrollTrigger and canvas: frame preloading, WebP sizing, HiDPI rendering, and a reduced-motion fallback.

Animation for Content Editors

You manage the website content, but animations feel like a black box. Learn the vocabulary, know what's possible, and talk to developers effectively.

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.