The sentence that comes together

The words start scattered, rotated and each with its own weight and width; as you scroll they go back to their places and the sentence reads.

Text, ScrollGSAPEasyLifetime

Scroll inside the preview

The code

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

/* La frase che si ricompone
   Le parole partono sparse per lo schermo: spostate, girate, grandi o piccole, ognuna con una sua
   larghezza e un suo peso del carattere variabile. Scorrendo tornano una alla volta al loro posto, con
   tempi un po' diversi, e la frase si legge. Alla fine le parole in data-accento prendono il colore.
   Il disordine è deciso da un numero (SEME): cambia il seme, cambia la confusione, ma resta la stessa
   a ogni visita. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const SEME = 7;          /* il disordine di partenza: prova altri numeri */
const SPARGI = 0.4;      /* quanto lontano partono, in frazione dello schermo */
const GIRO = 38;         /* rotazione massima in gradi */
const RITARDO = 0.35;    /* quanto si sfalsano le parole, in frazione della corsa */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const frase = document.querySelector('[data-frase]');

/* divide in parole senza perdere lo span dell'accento */
const parole = [];
function dividi(nodo) {
  [...nodo.childNodes].forEach((n) => {
    if (n.nodeType === 3) {
      const pezzi = n.textContent.split(/(\s+)/);
      const f = document.createDocumentFragment();
      pezzi.forEach((p) => {
        if (!p) return;

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

A sentence has exploded across the screen: the words are moved, rotated, some huge and some small, some wide and light, others narrow and heavy. As you scroll they return to their places one after another, with slightly different timings, and each word's type settles. When the sentence is whole, the important words take on colour.

How it works

One word, one span

The script splits the sentence into words without losing the spans inside it (here the accent one): every word is an inline-block, so it can be moved and rotated. Screen readers keep the whole sentence in aria-label.

Repeatable disorder

Starting offset, rotation, scale, width and weight come from a seeded number generator: the mess is the same on every visit, and changing SEME picks another one.

The variable font

Width and weight live in two CSS variables (--w and --g) used in font-variation-settings. GSAP animates the variables as numbers: every word goes from wdth 75-125 and wght 280-860 to the common value.

Staggered along the run

Everything is in one scrubbed timeline. Each word lasts 65% of the run and starts at a random point in the first 35%: they arrive in scattered order, and the last one closes the sentence.

Values to change

Name	File	Default	What it changes
`SEME`	script.js	`7`	The starting disorder. Every number gives a different mess, always the same for that number.
`SPARGI`	script.js	`0.4`	How far the words start, as a fraction of the screen.
`GIRO`	script.js	`38`	The maximum starting rotation, in degrees.
`RITARDO`	script.js	`0.35`	How much the words are staggered along the run.

When to use it

For a manifesto sentence mid-page, the one you want people to actually read. One or two lines: with a whole paragraph it becomes noise.

On phones

It works the same: distances are fractions of the screen, so the disorder shrinks with it.

With reduced motion

The sentence is already together and still.

Pitfalls

Changing the font's width changes the word's width and moves the others: fine while they fly, but the final value must be the same for all of them, otherwise the reassembled sentence does not line up.
Put overflow clip on the stage: words moved off screen widen the page and a sideways scroll appears on phones.
With function values (x: () => ...) distances are recomputed on every ScrollTrigger refresh, but the generator moves on: if you need the same disorder after a resize too, compute the numbers once and store them.
Do not split the sentence with innerHTML: you lose existing spans and attributes. Walk the text nodes and replace only those.

Libraries

GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.

Weight: 5.3 KB of our own files.

Testing

Tested on 26 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

Standing letters with a long shadow

Text, Scroll, 3D

NewFree

Words that melt into each other

Text, Scroll, SVG