La frase e la timeline

Scroll, TransizioniGSAP, Solo CSSMediaPeso compresso: Demo 5,0 KBGSAP + ScrollTrigger 45 KBGratisScarica lo zip

Scorri dentro l’anteprima

Cinque tessere colorate stanno nei quadratini di una frase; quando la timeline arriva a schermo, scorrendo in giù ci cadono dentro una dopo l’altra, e risalendo tornano nella frase, inclinandosi in volo.

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The sentence and the timeline</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="top">
    <p class="brand">Spool</p>
    <p class="top__line">Video editor</p>
  </header>

  <main>
    <!-- the sentence: five empty squares between the words; the tiles are drawn onto them -->
    <section class="statement" data-statement>
      <h1 class="statement__text">
        Spool<span class="slot" data-slot></span>turns every clip<span class="slot" data-slot></span>into a block<span class="slot" data-slot></span>you can pick up,<span class="slot" data-slot></span>reshape<span class="slot" data-slot></span>and drop on the timeline.
      </h1>
      <p class="statement__hint">Scroll down, then back up</p>
    </section>

    <!-- the timeline: the tiles really live here, one in each place -->
    <section class="editor" data-editor>
      <div class="timeline" data-timeline>
        <div class="timeline__bar">
          <span class="timeline__name">spring-campaign.spool</span>
          <span class="timeline__code" data-code>00:00:00:00</span>
        </div>
        <div class="timeline__ruler" aria-hidden="true">
          <span>0s</span><span>1s</span><span>2s</span><span>3s</span><span>4s</span><span>5s</span><span>6s</span>
        </div>
        <div class="timeline__track" data-track>
          <div class="timeline__home" data-home>
            <div class="tile tile--sun" data-tile><span class="tile__face">
              <svg viewBox="0 0 100 100" aria-hidden="true"><path d="M18 64a32 32 0 0 1 64 0Z" fill="#fff7e6" /><path d="M14 72h72M24 81h52" stroke="#fff7e6" stroke-width="6" stroke-linecap="round" /></svg>
            </span></div>
          </div>
          <div class="timeline__home" data-home>
            <div class="tile tile--stripes" data-tile><span class="tile__face"></span></div>
          </div>
          <div class="timeline__home" data-home>
            <div class="tile tile--wave" data-tile><span class="tile__face">
              <svg viewBox="0 0 100 100" aria-hidden="true"><path d="M8 58c12-18 22-18 34 0s22 18 34 0 14-12 18-8" fill="none" stroke="#f2fff9" stroke-width="9" stroke-linecap="round" /></svg>
            </span></div>
          </div>
          <div class="timeline__home" data-home>
            <div class="tile tile--type" data-tile><span class="tile__face"><span class="tile__aa">Aa</span></span></div>
          </div>
          <div class="timeline__home" data-home>
            <div class="tile tile--star" data-tile><span class="tile__face">
              <svg viewBox="0 0 100 100" aria-hidden="true"><path d="M50 12c4 26 12 34 38 38-26 4-34 12-38 38-4-26-12-34-38-38 26-4 34-12 38-38Z" fill="#fbf7ff" /></svg>
            </span></div>
          </div>
          <span class="timeline__head" data-head aria-hidden="true"></span>
        </div>
        <div class="timeline__track timeline__track--audio" aria-hidden="true" data-wave></div>
      </div>
    </section>

    <section class="outro">
      <p class="outro__text">Every block keeps its settings wherever you drop it.</p>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.

35 valori da cambiare

Apri il Playground

Oppure chiedila a Claude Code

Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:

Prendi «La frase e la timeline» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

In alto una frase grande, «Spool turns every clip into a block you can pick up, reshape and drop on the timeline.», con cinque quadratini fra le parole; in ognuno una tessera lucida come l’icona di un’app: un sole all’alba, righe blu, un’onda, «Aa», una stella. All’apertura il disegno della prima tessera cade dall’alto nel suo posto. Sotto c’è la timeline scura di un editor video, col nome del progetto, il timecode, il righello dei secondi, cinque posti vuoti e una traccia audio. Quando la timeline arriva a schermo, scorrendo in giù le tessere lasciano la frase e ci cadono dentro una dopo l’altra, ognuna inclinandosi un po’ in volo; risalendo tornano nei loro quadratini. Intanto la testina arancio corre lungo la timeline con lo scorrimento e il timecode conta i fotogrammi.

Come funziona

Dove stanno davvero

Nel codice le tessere stanno dentro i posti della timeline, larghe quanto il posto; nella frase ci sono solo cinque quadratini vuoti di 1 em (1,1 em sugli schermi larghi), con margini di 0,1 em, 0,2 em e −0,15 em. Una funzione misura quadratino e posto e porta la tessera nella frase: la scala è la larghezza del quadratino divisa per quella del posto, lo spostamento va da un centro all’altro. Per tornare a casa basta scala 1 e x e y a zero.

La direzione decide

Un IntersectionObserver dice quando la timeline è a schermo; da quel momento ogni evento di scorrimento guarda la direzione: in giù le tessere vanno nella timeline, in su tornano nella frase. Se la timeline entra dopo un salto (un tasto, un link) le tessere seguono l’ultima direzione vista.

Il volo

Ogni tessera vola in 1,5 secondi di power2.inOut, a 0,1 secondi dalla precedente verso la timeline e a 0,05 verso la frase. Nella prima metà del volo ruota fino a ±15° a caso con power2.in, nella seconda torna dritta con power2.out. Prima di ogni volo i tween vecchi si fermano, così si può cambiare idea a metà strada.

La prima tessera

Quando la frase arriva, 300 px prima del fondo dello schermo e una volta sola, il disegno della prima tessera cade da −300 px con 15° di rotazione, in 2 secondi di power3.out: la tessera è già al suo posto, cade solo quello che c’è dentro.

Testina e timecode

Uno ScrollTrigger con scrub di 0,4 secondi porta la testina da un capo all’altro della traccia mentre l’editor attraversa lo schermo, e il timecode legge il progresso su 6 secondi a 24 fotogrammi. Al ridimensionamento le tessere si rimettono al loro posto senza animazione.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FLIGHT`	script.js	`1.5`	Quanto dura il volo di ogni tessera, in secondi.
`STAGGER`	script.js	`0.1, 0.05`	Il ritardo fra una tessera e l’altra, verso la timeline e verso la frase.
`TILT`	script.js	`15`	Quanto si inclina al massimo una tessera in volo, in gradi.
`DROP`	script.js	`-300, 15, 2`	La caduta del disegno della prima tessera: da quanti px, con quanti gradi, in quanti secondi.
`LENGTH, FPS`	script.js	`6, 24`	La lunghezza della timeline in secondi e i fotogrammi al secondo del timecode.

Provali nel Playground

Quando usarla

Per spiegare un prodotto che mette le cose al loro posto: un editor, un costruttore di pagine, un configuratore. Funziona con qualunque coppia di frase e contenitore: icone in una frase che poi finiscono in un carrello, in una griglia, in un calendario.

Sul telefono

La frase va su più righe e i quadratini restano di 1 em; la timeline prende tutta la larghezza e le tessere si rimpiccioliscono con lei. La direzione la decide il dito come la rotella.

Con il movimento ridotto

Niente volo, niente inclinazione e niente caduta: le tessere passano dalla frase alla timeline, e ritorno, di colpo. La testina segue ancora lo scorrimento.

Trappole

La trasformazione si calcola dal posto nella timeline, che non si muove, e non dalla tessera, che è già trasformata: misurando la tessera lo spostamento vecchio si somma a quello nuovo.
Frase e timeline devono scorrere insieme nella pagina: se una delle due fosse fissata o sticky, lo spostamento misurato cambierebbe a ogni scorrimento.
Un IntersectionObserver risponde dopo l’evento di scorrimento: dopo un salto la timeline risulta a schermo quando l’ultimo evento è già passato, e le tessere non si muoverebbero. Per questo, quando entra, si usa l’ultima direzione vista.
Su iPhone la barra che si ritira fa scattare resize a ogni scorrimento: le tessere si rimisurano solo se cambia la larghezza.

Librerie

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

Compressi con gzip, i tre file della demo pesano 5,0 KB; le librerie: GSAP + ScrollTrigger 45 KB.

Collaudo

Provata il 28 settembre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

Licenza d’uso

Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.