160
AI ready

Last Word Zoom

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

Pinned scroll quote that lights word by word, then the camera flies into a letter of its last word, which is filled with a photo, until the photo fills the screen.

ScrollTrigger advanced
6 more details
pinningscrubzoomtext-animationmask-revealscroll-storytelling

Released

About this effect

A statement section that reads itself and then lets you walk into it. Your line sits pinned in big, ghosted type, and scrolling lights it one word at a time at the pace of someone reading it aloud. The last word lights differently: its letters fill with your picture, with nothing around them but the ground. Then the camera moves in. The whole statement grows from a point inside one stroke of that word, the other words fly past the edges of the screen, and the letters become a widening window until the picture is all there is. A closing heading and a sentence or two then arrive over it.

Read the full effect overview

It joins a text reveal and a zoom in one gesture, so a sentence and a picture read as a single thought. The picture stays perfectly still behind the letters throughout, and the type stays razor sharp however large it gets. The move adapts to any copy, font and screen shape, the media slot takes any image or a muted looping video, and the picture lands as itself at 1:1. Each copy on a page runs on its own, so it can be repeated down a page as story chapters.

Last Word Zoom - GSAP animation effect preview

What's included

10 items
  • Word-by-word reading paced by word length, with a slight rise on the word being read
  • The last word's letters fill with the real picture or video behind them, with no box or tint around them
  • A true camera move into one stroke of that word, at an even pace from the first frame to the last
  • The rest of the statement flies past the edges of the screen, sharp at every size
  • The picture stays still behind the letters and lands at exactly 1:1 full bleed, with no seam, at every screen shape
  • Adapts to any copy, font, wrap and viewport, and to any solid ground colour
  • Three slots to fill: a headline with an optional attribution, the media, and a closing payoff over a scrim tuned for 4.5:1 body text
  • Works with any image or a muted looping video in the media slot, and any number of independent copies on a page
  • Data attributes tune pin distance, scrub smoothing, the point reading hands over to the zoom, and which letter the camera enters
  • Reduced-motion, no-JS and blocked-CDN visitors get the picture full bleed with every line of text readable

Perfect for

5 use cases
  • Agency and studio statement sections that need to earn their place on the home page
  • A famous line or a founder's quote that opens onto the first big picture of an about page
  • Hospitality, travel and outdoor brands where the last word of the line can be the place itself
  • Long-form story pages, repeated as chapters with their own photo and closing paragraph
  • Product launches that build to a single hero shot or looping video

How it works

2 sections

A pinned ScrollTrigger scrubs one timeline across the section, divided at a point you choose. Before it, the words of the statement light in sequence and the last word's letters fill with the media. After it, the camera moves into one letter at a steady pace until the media is all that remains, and the closing payoff arrives.

The media is laid out at its final size from the start and never moves or scales, which is why it lands sharp, and the move fits itself to the text and the screen every time the layout changes. Touch devices get a shorter pin distance, and reduced-motion visitors a static full-bleed layout with no pin at all.

Plugins ScrollTrigger
Difficulty Advanced
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

The three slots: the statement (.lwz__statement), the media (.lwz__media) and the payoff (.lwz__payoff). Change the words, the picture and the type freely. The move adapts to the last word wherever it lands, so nothing needs adjusting when the copy, the font, the wrap or the screen shape changes. Inline markup such as <em> inside the statement is kept, and any punctuation after the last word stays solid. The attribution (.lwz__by) is optional and travels with the words.

Any image or video goes in the media slot. For a muted looping video, swap the <img> for this one line:

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

The video plays through the letters of the word just as a picture does.

Choosing what fills the letters: the picture never moves, so the letters show whatever is behind them on the screen. Aim for a bright, plain part of the picture where the word lands, so that it reads clearly. Two things steer this: --lwz-drop lowers the statement on its stage (the demo uses 16svh to put the word on the lit water), and --lwz-crop changes the crop of the picture, for example @media (max-width: 700px) { .lwz { --lwz-crop: 30% 50%; } }.

Choosing the letter: data-lwz-letter names the letter the camera enters, counting from 1. Upright strokes work best: the demo uses 2, the "i" of "river". Leave it out and the effect takes the letter with the thickest stroke.

What is only the demo's styling: the page font, the type sizes, and the .lwz__cue line. Delete the cue if you do not want it.

Colours, set on .lwz in style.css:

Token Default What it does
--lwz-ground #141414 The ground around the letters. Any solid colour works
--lwz-ink #f1efea The text colour
--lwz-by #c4c2bd The attribution colour
--lwz-ghost 0.42 Opacity of an unread word. Keep it at 3:1 against the ground
--lwz-crop 50% 50% Crop of the media
--lwz-drop 0px How far the statement sits below centre

The payoff over your picture: the scrim in .lwz__scrim is tuned so the demo's body text clears 4.5:1 and no stronger. A brighter photo may need its stops raised, and a dark one can lose them.

CSS the effect depends on: keep overflow: hidden on .lwz__stage. Do not add will-change, a 3D transform or a filter to .lwz__read or anything inside it, because the browser would then enlarge a frozen image of the words and they would blur. The rules under .has-js are the pinned layout, and the rules outside them are the static fallback. Keep both.

Options

Attribute Values Default Description
data-lwz-distance Number 360 Pin distance as a percentage of the viewport height. Touch devices use 72 percent of it
data-lwz-scrub Seconds 0.6 Scrub smoothing. 0 ties it directly to the scroll
data-lwz-split 0.2 to 0.8 0.45 Progress at which the reading hands over to the zoom
data-lwz-letter Number from 1 Thickest stroke The letter of the last word the camera enters

Accessibility

  • Screen readers: the statement stays one real heading with its whole sentence intact at every point of the scroll. Give your image a useful alt.
  • Contrast: unread words clear 3:1 on the ground as large text, and the demo's payoff body clears 4.5:1 on the picture.
  • Reduced motion: no pin and no animation. The media sits full bleed behind every line of text. A preference change while the page is open is picked up straight away.
  • No JavaScript or a blocked CDN: the same static layout.
  • Touch: a shorter pin distance, with the type sized for the phone and the move worked out afresh for its screen.

Teardown

In your downloadThe working code for this step, in script.js.

This removes the pin, the triggers and everything the effect added, and restores your original heading. Unrelated page animations keep running.

Dependencies

Required:

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

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

£7