015
AI ready

Scroll Image Sequence

£7
or the whole Vault, £99
Skip the demo Open in new tab

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

Updated

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.

Scroll Image Sequence - GSAP animation effect preview

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, from the latest scan. 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.

The Vault opens this source and the whole library.

Each product gives you the HTML, CSS and JavaScript source, the full documentation and an AI setup prompt, licensed for unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£99 Get the Vault See what you get

One payment, over 300 products, and future additions to the library.

Documentation

Quick Start

1. Add to your HTML <head>:

In your downloadThe working code for this step, in index.html.

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

In your downloadThe working code for this step, in index.html.

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:

In your downloadThe working code for this step, in index.html.

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:

In your downloadThe working code for this step.

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

Also in your download: the full source, worked examples, the events and programmatic API, and the class reference.

Related articles

Stagger Grid Reveal demo, from this article

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. Scroll Video Scrub demo, from this article

Apple-style image sequence scroll animation with GSAP

Build an image sequence scroll animation with GSAP ScrollTrigger and canvas: staged preloading, mobile frame sets, reduced motion and troubleshooting. Magnetic Cursor Effect demo, from this article

Web animation terms for content editors, and how to ask for them

The animation vocabulary for content editors: entrances, hovers, scroll-linked motion and transitions, what you can change and how to brief a developer.

£7