The title that rises from a line

A small window flips through frames like a projector, then bursts to full screen while the title, squashed until it looks like a line, stands up to its full height.

Transitions, Text, ImagesGSAPMediumLifetime

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.

/* Il titolo che si alza dalla linea
   Una finestrella al centro sfoglia i fotogrammi come un proiettore: ognuno scende dall'alto con un
   clip-path e copre il precedente. L'ultimo si ingrandisce oltre lo schermo mentre la finestra si apre
   a tutto campo; il titolo, schiacciato fino a sembrare una riga gialla, si alza alla sua altezza e le
   didascalie si separano per incorniciarlo. Chiude un lampo di fotogrammi dietro le lettere. */

/* ---- valori da cambiare ---- */
const SCATTO = 0.3;            /* secondi fra un fotogramma e il successivo nella finestrella */
const INGRANDIMENTO = 1.2;     /* di quanto l'ultimo fotogramma supera lo schermo quando esplode */
const LAMPO = 0.12;            /* secondi per fotogramma nel lampo finale (0 lo toglie) */
const VELO = 0.5;              /* quanto si scurisce la foto sotto il titolo */
const ALTEZZA_MAX = 0.62;      /* il titolo non supera questa frazione dell'altezza dello schermo */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const apertura = document.querySelector('.apertura');
const finestra = document.querySelector('.finestra');
const fotogrammi = [...document.querySelectorAll('.fotogramma')];
const ultimo = fotogrammi[fotogrammi.length - 1];
const titolo = document.querySelector('.titolo');
const dentro = document.querySelector('.titolo__dentro');
const righe = [...document.querySelectorAll('.didascalia span')];
const velo = document.querySelector('.velo');
const rivedi = document.querySelector('.rivedi');
let tl = null;
let finito = false;

The code for this animation is part of lifetime access.

The preview stays open: watch it, slow it down, try it on your phone.

Lifetime access

What it does

On load the screen is dark and there is only a small window in the middle. Inside it frames drop one after another, each covering the previous one, like slides in a projector; four captions rise at the sides. The last frame grows past the edges of the screen while the window itself opens, so the picture grows inside a frame that widens. Then a yellow line appears: it is the squashed title, which stands up to its full height while the captions move apart to frame it above and below. A quick burst of frames behind the letters closes it.

How it works

The projector

The frames are stacked in the middle, all with clip-path inset(0 0 100% 0). A single tween takes them to inset(0) with a stagger equal to the duration: when one has finished dropping, the next one starts. In the stagger's onComplete callback the one underneath is hidden, so only one image is ever lit.

The window that opens

Everything sits in a full-screen container cut with clip-path. The last frame animates width and height up to 120% of the screen (expo.inOut) and, 0.3 seconds later, the container's cut goes to inset(0) (circ.inOut). Two movements at once: the image grows inside a frame that is opening.

The title from the line

The title fills the width: the script measures it at 100px and scales it. It starts at scaleY 0.012, so it looks like a line, and goes to 1 in half a second with circ.inOut. The captions are anchored to the midline and move by calc(var(--apri) * var(--meta)): --meta is half the title in pixels, --apri goes from 0 to 1 together with the title.

The burst

At the end every frame goes full screen and they light up one at a time with visibility sets 0.12 seconds apart, under a dark veil that lowers the contrast. Then the last one stays, dimmed, behind the title.

Values to change

Name	File	Default	What it changes
`SCATTO`	script.js	`0.3`	Seconds between one frame and the next in the small window.
`INGRANDIMENTO`	script.js	`1.2`	How far the last frame grows past the screen when it bursts.
`LAMPO`	script.js	`0.12`	Seconds per frame in the final burst. With 0 there is no burst.
`VELO`	script.js	`0.5`	How much the photo under the title darkens, from 0 to 1.
`ALTEZZA_MAX`	script.js	`0.62`	The title never exceeds this fraction of the screen height, even if the width would allow it.

When to use it

For the entrance of a site made of photographs: a reportage, an event, a collection. On the first visit only: the second time the title already in place is enough.

On phones

The small window shrinks, the title goes onto two lines and the captions get narrower; everything else is the same.

With reduced motion

No projector and no burst: the final scene appears straight away, with the title in place and the photo dimmed.

Pitfalls

A clip-path written with calc() does not animate well: compute the starting cut in pixels, then take it to inset(0px 0px 0px 0px).
Measure the title only after document.fonts.ready: with the fallback font the width is different and the title overflows the screen.
The burst is light changing ten times a second: keep it short, under a dark veil, and never with reduced motion.
At the end switch the sizes back to vw and vh: the pixels computed at the start do not follow the window when it is resized.

Libraries

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Weight: 21 KB of our own files.

Testing

Tested on 27 September 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: Done

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.

From the same family

The loader that becomes a logo

Transitions, SVG, Text

NewFree

Projects in a row with a ring

Scroll, Images, Text

NewLifetime

The clock that counts the minutes

Transitions, Text