040
AI ready

Scroll Sequence Hero Transition

£5

A scroll-scrubbed canvas image sequence hero that lifts into real page content, with Editorial, Serif, and Mono typographic presets.

ScrollTrigger Lenis advanced
6 more details
image-sequencecanvaspinningscrubpage-transitionvelocity-reactive
Scroll Sequence Hero Transition - 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 Sequence Hero Transition demo in new tab

About this effect

A cinematic hero-to-content transition that scrubs a numbered image sequence on canvas, then turns the entire hero into a moving sheet that lifts away to reveal the page beneath. ScrollTrigger keeps the frame playback, type departure, accent chase layer, content entrance, and final pin release on one fully reversible timeline.

Read the full effect overview

Unlike a chapter-based image sequence, this effect is built specifically for the opening handoff: the animation does not end on another frame, it resolves into a usable content section and normal document scrolling.

What's included

10 items
  • Canvas-cover playback for any numbered image sequence
  • Three switchable typographic presets: Editorial, Serif, and Mono
  • Two-layer hero exit with a solid accent chase sheet
  • Real destination content revealed beneath the moving hero
  • Velocity-reactive type skew and blur that settles back to crisp
  • Responsive HiDPI canvas rendering with nearest-frame fallback
  • Separate desktop and mobile pin distances through data attributes
  • Reversible ScrollTrigger timeline with a seamless pin release
  • Static reduced-motion and no-JavaScript reading modes
  • Single-clock Lenis integration with complete teardown

Perfect for

5 use cases
  • Campaign homepages that need a cinematic opening and a clean route into the message
  • Culture and travel editorials transitioning from atmosphere into an article lead
  • Product launches that turn rendered footage into the first feature section
  • Portfolio heroes handing a visual reel into project details
  • Architecture and destination sites opening with an approach sequence

How it works

2 sections

The effect preloads a numbered image set and maps a scroll-driven playhead onto it. Each update draws the nearest available frame to a responsive HiDPI canvas with a centred cover crop, while the same timeline pushes the footage forward and scales the progress rail. Theme controls update one data-theme value, letting CSS swap the display face, its weight and width, and the sheet geometry without rebuilding the animation.

Near the end of the pinned journey, the hero sheet translates beyond the top edge and exposes a solid chase sheet beneath it. That second sheet follows with a short overlap, revealing ordinary semantic content already positioned in the stage; its marked children rise into place before the pin releases. Scroll speed feeds a decaying type skew and blur on fine pointers, while touch gets a shorter journey and reduced motion an unpinned static layout.

Plugins ScrollTrigger
Difficulty Advanced
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, 9 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 Sequence Hero Transition 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 to your <body>:

Code snippet omitted: it ships with the download.

Keep the destination, chase sheet, and hero in that stacking order. Theme controls are optional; omit the switcher when shipping one chosen direction. The fallback image prevents a blank hero while frames load and supplies the no-JavaScript state. The demo loads its frames from assets/frames/ relative to the page; a root-absolute data-frame-path also works when the sequence lives elsewhere on your site.

3. Add before closing </body>:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

The required contract is the root [data-sequence-handoff], a stage, a hero sheet, a chase sheet, a canvas, and a real fallback image. The destination can contain any ordinary HTML: a feature section, article lead, project introduction, or product grid. Mark only the children that should settle in with data-handoff-reveal.

The demo's ink-maker copy, the brand row, the switcher, the follow-up .series section and the ink footage itself are art direction and can be deleted or replaced. What the effect depends on in the CSS:

  • The stage is viewport-height with overflow: hidden; the destination, chase and hero cover it as stacked absolute layers, in that order.
  • The hero has overflow: hidden so its canvas and lower edge move as one sheet, and the chase sheet is a solid fill (the demo uses --accent).
  • The reveal start state (.has-js [data-handoff-reveal] { opacity: 0; visibility: hidden; transform: translateY(34px) }) is gated under .has-js, with the reduced-motion restore, so content never disappears when JavaScript fails. Keep that gate if you rewrite the stylesheet.
  • The static modes (html:not(.has-js) and .handoff--static) turn the stage into a column-reverse flex column so the hero reads first and the destination follows in document flow.

Each preset is plain CSS keyed by the root's data-theme value and only changes tokens on .handoff: the display face, weight, width, style, tracking and the sheet's corner radius. Keep one preset and remove the switcher if buyers should see a fixed brand direction, or add another selector using the same pattern:

Code snippet omitted: it ships with the download.

The page colours (--page, --ink, --accent) live on :root; the hero sheet's own values (--sheet, --sheet-ink) live on .handoff, because the frames decide how bright the sheet is.

Visual Presets

Theme Character What changes
editorial Contemporary launch page Mona Sans 700, tight tracking, sentence case, 10px lower corners on the hero sheet
serif Journal and art-book Instrument Serif italic at a larger size; the serif is the whole point of this preset
mono Monolithic, monochrome Mona Sans condensed (75% width) in capitals, squared sheet, harder contrast on the frames

Set the initial design with data-theme. A button marked data-theme-control="serif" updates the root and its aria-pressed states without recreating the canvas or ScrollTrigger.

Options

Set these attributes on [data-sequence-handoff]:

Attribute Values Default Description
data-theme editorial, serif, mono editorial Initial typography and design preset
data-frame-path Relative, root-relative, or CDN prefix /assets/frames/frame_ Path and filename prefix before the padded frame number
data-frame-count Integer 120 Number of sequence frames
data-frame-pad Integer 3 Filename number width; 3 creates 001
data-frame-ext .jpg, .png, .webp .jpg Frame extension, including the dot
data-scroll-length Number 3.2 Desktop scroll distance in viewport heights
data-scroll-length-mobile Number 2.35 Mobile scroll distance in viewport heights
data-scrub Number, including 0 0.45 ScrollTrigger scrub smoothing in seconds
data-velocity Number 1 Desktop type smear strength; use 0 to disable

Element Hooks

Hook Purpose
data-handoff-stage Viewport stage pinned by ScrollTrigger
data-handoff-hero Full hero sheet that lifts out of view
data-handoff-chase Solid accent sheet that follows the hero
data-handoff-canvas Canvas receiving sequence frames
data-handoff-fallback Accessible representative image beneath the canvas
data-handoff-copy Optional hero copy that departs before the sheet
data-handoff-cue Optional interaction prompt faded after scrolling begins
data-handoff-progress Optional element scaled from 0 to 1
data-handoff-loading Optional polite loading-status element
data-handoff-reveal Destination child that rises into its final position
data-theme-control Optional button that applies its named visual preset

Preparing Frames

Export consistently sized frames and keep the sequence as small as practical:

Code snippet omitted: it ships with the download.

The renderer uses a centred cover crop and caps canvas pixel density at 2x. If a frame fails, it draws the nearest successfully loaded frame. Crop the source so the subject sits near the middle of the frame: a portrait phone shows only the central third of a 16:9 sequence.

The demo's 96 frames are a graded, cropped derivative of one Pexels clip, black ink dropped into water (https://www.pexels.com/video/5590919/, Pexels licence, no attribution required). assets/frames-manifest.json records the source and the exact extraction so the set can be regenerated; the frames total about 1.4MB.

Accessibility

  • The canvas is decorative. Put meaningful alt text on the fallback image.
  • Destination content remains ordinary semantic HTML in reading order.
  • prefers-reduced-motion: reduce removes pinning and scrubbing, showing a static representative hero followed by the destination.
  • Without JavaScript, the hero and destination become normal stacked sections and all reveal targets remain visible.
  • Scrolling stays native and keyboard-operable; there are no pointer-only controls.
  • Preset controls are real buttons with aria-pressed state and visible focus styling.
  • Keep links and buttons as real interactive elements with visible focus styles.

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

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.

Your cart

Your cart is empty

The Vault £99

Everything in the catalogue, plus everything we release next.

Or browse effects, templates or UI elements.