Scroll Expand

A clipped media frame that opens to full bleed as the page scrolls past it.

About this tool

A scroll-driven hero: the media starts as a rounded window holding a fraction of the stage, and the scroll opens it until it fills the viewport edge to edge. The image un-zooms as the frame widens, so the photograph reads as texture at rest and as composition once it lands, and the headline lifts away while an overlay fades in behind it: three crossfades on one timeline, all of them editable. The stage is sticky, so the expansion happens in place while a track underneath supplies the scroll it consumes; the hold control decides how long it stays open before the page moves on. It can be driven by the page it sits in or by its own container, and the smoothing is a real easing rather than a transition, so the frame keeps up with a trackpad flick instead of catching up after it. Swap the media, set the resting size and the corner radius, tune the distance and the hold, then export one self-contained HTML file.

In collections: Scroll Animations & Scroll Reveal Effects

Guide: Scroll Progress Indicator: When It Helps and How to Build It Scroll-Driven and Auto-Drifting Galleries: Choose the Right Motion

Scroll · HTML / CSS / JS All tools

Assets

Alt text

Copy

Headline

Scroll hint

Overlay title

Overlay body

Scrim

Frame

Start width %

Start height %

Start radius px

Scroll

Driven by

self page

Expansion length ×

Hold at full bleed ×

Media lag

Follow s

Preview

Progress

auto rest mid full