150
AI ready

Text Mask Zoom

£7 or the whole Vault, £79.20

A pinned hero opens on one huge word cut out of the page with a film playing through its letters. Scroll flies the camera through the hole in one letter until the film is full bleed, then the real heading rises over it. Built on GSAP ScrollTrigger.

ScrollTrigger Lenis intermediate
5 more details
mask-revealpinningscrubtext-animationscroll-storytelling

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

Open the demo in a new tab
Open Text Mask Zoom demo in new tab

Released

About this effect

A video hero that opens on a single word. The word is cut out of the page, so the film plays through its letters while everything around them stays solid page colour, and the page's own copy is printed around it. Built on GSAP ScrollTrigger, which pins the section and ties the whole journey to the scrollbar.

Read the full effect overview

Scroll and the camera flies at one letter you choose, the O in the demo. The letter swings to the middle of the screen as it grows, the island in its centre opens like an aperture, and the last stretch through the ring is fast, so you pass through the letter rather than watching it fade. The page casts a shadow onto the film through the letters that deepens as the camera closes in, and the film itself grows more slowly than the word, because it is farther away. Once through, the film settles back with a small overshoot, a grade comes up under the copy, and the section's real heading, text and buttons rise over it. Scroll back and every step reverses.

The word is drawn as a vector mask in your own web font, so it stays sharp at any zoom, and the camera aims at the real hole in your letter, found from the font's own shape, so it adapts to any font, any word and any screen size. The demo is the word OUTSIDE over a drone film of a surf break, with a scroll cue and, once you are through the O, a heading and two buttons.

Text Mask Zoom - GSAP animation effect preview

What's included

10 items
  • Built on GSAP ScrollTrigger: one pinned, scrubbed journey from the word to a full-bleed film, reversing cleanly on the way back
  • Any word in any web font, fitted to the section width; choose the letter to fly through by its position
  • The letter's counter is found from the font's own shape after fonts load and on resize, so the camera never lands on a stroke
  • The counter opens like an aperture as you approach, and the flight speeds up through the ring
  • Stays sharp at any zoom: the word is a vector mask, not a scaled image
  • Depth cues: a shadow from the page onto the film that deepens with the zoom, and a film that grows more slowly than the word
  • Copy printed on the page flies away with it; the section's real heading and buttons rise in once you are through
  • Optional break point in the word for tall phone screens, a shorter scroll on phones, and a poster image instead of the film under 768px
  • Reduced motion keeps the word, then crossfades to the full film; without JavaScript the film simply plays under the real heading
  • Colours as CSS custom properties, and a small refresh and revert API

Perfect for

5 use cases
  • Outdoor, travel and sports brands whose footage is the reason to visit
  • Campaign and launch heroes built around one word or a product name
  • Film, festival and music sites that want the title to become the screen
  • Hotels, venues and destinations opening on a drone film of the place
  • Studio and agency showreels that start inside the studio name

How it works

4 sections

The section holds three layers: the film at the back, a full-size page-coloured sheet in front of it with the word knocked out by an SVG mask, and the content on top. GSAP ScrollTrigger pins the section for about one and a half screens of scroll (less on phones) and scrubs one timeline across it, with Lenis smooth scrolling when it is available.

The word is fitted to the section width in your web font. To find where to fly, the chosen letter is drawn once off screen in the same font: the enclosed space inside it is located, and its centre and its extent to the inner and outer edges of the stroke are measured. That happens after fonts have loaded and again whenever ScrollTrigger refreshes, so a resize or a late font never leaves the camera aimed at a stroke.

The zoom is interpolated in log scale, so it moves at an even optical pace, then eased so the end runs fast. The letter is steered to the centre of the screen while it grows, an aperture opens inside its counter, and the flight ends at the exact scale where the letter's outer edge has passed every corner of the section. The same progress drives the shadow, the slower film, the printed copy and the grade, and the real content rises in once you are through.

Phones get a shorter pin and an optional poster instead of the film. Reduced motion skips the pin and the zoom: the word holds, then crossfades to the full film as you scroll. Without JavaScript the sheet is never drawn, so the film plays under the real heading. Reverting removes the sheet, restores the film and the content, and releases the pin.

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.

Paid effect

Purchase to unlock the code.

Buying Text Mask Zoom 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. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£7 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

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

Code snippet omitted: it ships with the download.

3. Add the section to your <body>:

Code snippet omitted: it ships with the download.

The script draws the page-coloured sheet with the word cut out of it into [data-tmz-ground]. The masked word is decorative and hidden from assistive technology; your heading inside [data-tmz-content] is the real, selectable text.

Using It With Your Own Design

What the effect needs from your markup: a [data-tmz] section with a [data-tmz-ground] layer, a .tmz-media wrapper holding one <video> (or an <img>), and optionally a .tmz-shade grade inside it. Each direct child of [data-tmz-content] rises in once you are through the letter, with a small stagger, so wrap lines you want to move together. Anything marked [data-tmz-print] is treated as printed on the page: it flies away with the word and fades out in the first part of the scroll (the demo's kicker, note and swell figures). Several sections on one page each work independently.

What is only the demo's styling: the scroll cue printed on the ground, the heading and button styles, Archivo and IBM Plex Mono, and the yellow. Delete or restyle all of it. The word's font comes from the .tmz-ground__word rule: change its family, weight or font-stretch there and the fit and the counter measurement follow.

CSS the effect depends on: the section must be position: relative; overflow: hidden with a real height (the demo uses 100svh), and .tmz-media and .tmz-ground must stay position: absolute; inset: 0 so the word and the film share the same space. The film needs object-fit: cover at full size. Keep the .has-js gates: .has-js .tmz-ground { display: block } (the sheet only exists with JavaScript) and the .has-js .tmz-content > * { opacity: 0 } pre-hide with its reduced-motion restore. Set --tmz-ground to your page colour so the word reads as a hole in the page itself.

Options

All attributes go on the [data-tmz] section.

Attribute Values Default Description
data-tmz-word Any word OUTSIDE The word cut out of the page. A | marks an optional break used only on tall, narrow screens (OUT|SIDE)
data-tmz-focus Letter index from 0 0 The letter to fly through, counted without the |. Letters with a closed counter work best: O, D, Q, 0, B, P, A, R
data-tmz-distance Number of screen heights 1.5 Length of the pinned scroll. Phones use 70% of it
data-tmz-poster Image URL none Under 768px, this image replaces the film, and the film stops loading
CSS custom property Default Description
--tmz-ground #fff500 The sheet colour the word is cut out of
--tmz-ink #12120f Ink for copy printed on the sheet
--tmz-shadow rgba(4, 8, 9, 0.72) The shadow the sheet casts onto the film

State classes on the section: is-through once the film is full bleed (handy for restyling a header or other chrome you add), and is-reduced / is-masked under reduced motion.

Zoom and sharpness

Scaling an HTML text mask or a CSS mask image 40x or more blurs or tiles in some browsers, so the word here is an SVG <mask> whose geometry is rescaled every frame rather than a bitmap. It stays sharp in Chrome and Safari at the full zoom (about 9x on desktop and 11x on phones with the demo's font and word; a smaller letter or a thinner face needs more). The aperture that opens the letter is drawn in the same mask.

Safari's canvas cannot pick a font-stretch face, so when the word uses a width axis (the demo's Archivo Expanded), the counter is measured on the normal width and corrected horizontally. The result is within a few percent; if your font is unusual, check the flight in Safari once.

Accessibility

  • Real text: the masked word, the sheet and the film are aria-hidden. The section's heading and copy are ordinary text, labelled by aria-labelledby in the demo.
  • Reduced motion: no pin and no zoom. The word holds over the film; as soon as you scroll, it crossfades to the full film and the content.
  • No JavaScript: the sheet is never drawn, so the film plays under the real heading and buttons.
  • Keyboard: the pinned journey follows any scroll, including the keyboard and page keys; links inside the content stay focusable throughout.

Footage

Any muted, looping MP4 works; the film plays rather than scrubs, so it needs no special encoding. Through letter-shaped holes, footage with bold, moving texture reads best (water, weather, a crowd, a drone pass). The demo clip is a drone pass over a surf break by Nadezhda Moryak on Pexels (https://www.pexels.com/video/9806388/, licence permits modification and redistribution; credited anyway), shipped as a 12-second loop in VP9 WebM with an H.264 MP4 fallback. Always give the video a poster.

Dependencies

Required:

  • GSAP 3.12+ (the demo pins 3.15.0)
  • ScrollTrigger plugin

Optional:

  • Lenis 1.3+ for smooth scrolling (the demo pins 1.3.17). An existing window.lenis on your page is reused and never destroyed.

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