166
AI ready

Stretch Type Reveal

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

Pinned GSAP scroll section where a huge poster headline filled with a photo stretches into full-height columns, then fattens until the gaps close and the picture fills the screen.

ScrollTrigger intermediate
6 more details
pinningscrubmask-revealtext-animationstaggerscroll-storytelling

Released

About this effect

A pinned scroll chapter where the type does all the work. A huge condensed poster headline sits on a dark ground with a glowing photograph showing through its letters. Scrolling pulls the letters upward and downward, one after another, until they run the full height of the stage like columns. Then they fatten from their own centres until the gaps between them close to thin slits, the last slits shut, and the plain picture lands full bleed with a closing heading and sentence on top of it.

Read the full effect overview

There is no camera move and no zoom. The picture never shifts, so the letters behave as windows being forced open, and it lands at exactly 1:1 at any screen shape. The media slot takes an image or a muted looping video, the word fits itself to the stage, and phones get the headline on two lines. Place it several times on a page as repeated story chapters, each with its own picture and copy.

Stretch Type Reveal - GSAP animation effect preview

What's included

10 items
  • Letters that physically stretch: each one runs from headline size to well past the stage height, with a slight ripple along the word
  • A picture that never moves: the media stays perfectly still behind the type, so the letters read as windows
  • Gaps that close for real: columns fatten from their own centres until only thin slits remain, then those shut too
  • An exact landing: at the end the type is gone and the picture is the plain untouched image or video at 1:1, verified pixel for pixel
  • Three content slots: a headline, the media, and a closing heading and sentence that arrive over the full-bleed picture
  • Image or video in the media slot, with one line of markup to swap
  • Headline fits itself to any word and any screen, and stacks word by word on portrait screens
  • Several instances on one page, each scrubbing independently
  • Data attributes for pin distance, scrub smoothing and letter stagger, plus CSS tokens for the ground colour and the media crop
  • Accessible: a real heading for screen readers, a static full-bleed layout for reduced motion, no-JS and blocked CDN visitors

Perfect for

5 use cases
  • Restaurant, market and venue pages where the name of the place opens onto the place itself
  • Event and festival sites that turn a date or a short promise into the first big picture
  • Fashion and editorial stories using one strong word per chapter
  • Product launches where a two-word line opens onto a film of the product
  • Long-form pages that need a recurring chapter break with real presence

How it works

2 sections

A pinned ScrollTrigger drives the whole passage from one scrubbed progress value, so scrolling back returns exactly to the first state. The headline is split into letters that keep a real heading for assistive technology, and each letter stretches and then widens about its own centre on a timing slightly behind its neighbour.

The media is laid out at its final full-bleed size from the start and is never transformed, which is why it stays still through the move and lands sharp. Type is redrawn at its true size on each frame, so letter edges stay crisp however far they stretch. Touch devices get a shorter pin distance, and reduced-motion visitors a static full-bleed layout with every piece of text visible.

Plugins ScrollTrigger
Difficulty Intermediate
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 before the closing </body> tag:

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

3. Add the section anywhere in your <body>:

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

Using It With Your Own Design

What the effect needs from your markup: a .str root holding .str-media, .str-headline, and optionally .str-scrim, .str-payoff and .str-cue. Use any heading level for the headline and payoff. Write the headline as plain text: the script splits it into letters and keeps a hidden copy for screen readers. Every query is scoped to its root, so repeat the whole block for another chapter.

Any image or video goes in the media slot. It is laid out full bleed from the start and never transformed. To use a muted looping video, replace the <img>:

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

Pick pictures with colour through the middle of the frame, because that is what the letters show first. At rest --str-gain brightens the media and --str-glow lifts its darkest parts with coloured light, so every letter reads against the ground. Both leave as the columns open and the media lands untouched. Set --str-focus to keep the subject in frame when the media is cropped.

What is only the demo's styling: the font, the payoff's type sizes and its position, the scrim's strength and the optional cue. If you change your picture, recheck the scrim: it is tuned so that the body text clears 4.5:1 on the demo picture's brightest pixels.

CSS the effect depends on: keep the rules behind .has-js. They set the ground, how the headline layers over the media, the hidden start state of the payoff, and the section's 100svh height. The root needs overflow: hidden and isolation: isolate. The ground works best dark, because the letters show the picture wherever it is brighter than the ground.

Using another typeface: tall condensed faces work best, since a narrow letter has more room to fatten. Headlines are set in uppercase by text-transform, and the source text keeps its normal case for screen readers. The measurements at the top of script.js (CAP_HEIGHT, TRACKING, CLOSE_STROKE) describe the type in em, and --str-origin-y is the line letters stretch away from, normally the middle of the capitals.

Repeated chapters: each section pins and scrubs on its own. Give each one its own media, headline and payoff, and put as much or as little ordinary content between them as you like.

Options

Attribute on .str Values Default Description
data-str-distance Number 300 Pin distance as a percentage of the section height. Touch devices use 70 percent of this.
data-str-scrub Seconds 0.6 Scrub smoothing. 0 ties the motion directly to the scrollbar.
data-str-stagger Number 0.012 Share of the scroll between one letter and the next. Larger values ripple more.
CSS token on .str Default Description
--str-ground #0b0b0b The ground around the letters.
--str-focus 50% 50%, 57% 50% on portrait screens object-position of the media.
--str-gain #636363 Brightens the media inside the letters at rest. Lighter is brighter. #000000 for none.
--str-glow a red to crimson gradient Coloured light that lifts the darkest parts of the media at rest. Match it to your picture. #000000 for none.
--str-origin-y 50% The line within the letter box that letters stretch away from.

Accessibility

  • Headline: stays a real heading with the full text as its accessible name. The split letters are aria-hidden.
  • Reduced motion: no pin and no animation. The picture is full bleed with the headline and payoff visible over the scrim. The effect also responds if the preference changes while the page is open.
  • No JavaScript or a blocked CDN: the same static layout.
  • Touch: a shorter pin distance. On portrait screens each word takes its own line and the crop moves to keep the subject in frame.
  • Media: give images a useful alt, or an empty one if the headline and payoff already say it. Videos should be muted and need no sound to make sense.

Dependencies

  • GSAP 3.12+ (the demo is pinned to 3.15.0)
  • ScrollTrigger

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

£7