Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
L’adesivo che segue le parole
Una citazione grande con due parole colorate: passandoci sopra, da ognuna esce un adesivo che segue il puntatore con un piccolo ritardo e si inclina nel verso in cui lo muovi. La faccia spunta dal basso con un rimbalzo, il cuore si apre come una finestra tonda e batte.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The sticker that follows the words</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/wght-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a quote from a made-up comedy podcast. Two words are a different colour: on each one a sticker pops out of the
word and rides along above the pointer, leaning the way it moves; the heart one beats while it is out -->
<main class="palco">
<figure class="citazione" data-citazione>
<blockquote class="citazione__testo" data-testo>
<p>I tell strangers I <span class="accento" tabindex="0" data-parola="cuore">love</span> them on day one.</p>
<p>It saves us all a lot of <span class="accento" tabindex="0" data-parola="faccia">awkward</span> time later.</p>
</blockquote>
<figcaption class="citazione__firma" data-firma>
<span class="firma__chi">Rosa Pemberton</span>
<span class="firma__dove">Late Bloomers, episode 112</span>
</figcaption>
<!-- the two stickers: drawn here, never in the flow of the text -->
<div class="adesivo adesivo--faccia" aria-hidden="true" data-adesivo="faccia">
<div class="adesivo__corpo" data-corpo>
<svg viewBox="0 0 220 230" focusable="false">
<g class="bordo">
<path d="M112 34c40 0 72 30 72 74 0 50-32 92-72 92s-74-40-74-90c0-44 32-76 74-76Z"/>
<path d="M128 4h76a14 14 0 0 1 14 14v26a14 14 0 0 1-14 14h-40l-18 16 3-16h-21a14 14 0 0 1-14-14V18a14 14 0 0 1 14-14Z"/>
</g>
<path class="pelle" d="M112 34c40 0 72 30 72 74 0 50-32 92-72 92s-74-40-74-90c0-44 32-76 74-76Z"/>
<path class="capelli" d="M42 102c-6-44 26-74 70-74 38 0 70 24 72 62-14-16-34-22-52-18 4-8 2-16-6-22-12 14-40 22-84 52Z"/>
<path class="guance" d="M64 146a12 8 0 1 0 24 0a12 8 0 1 0-24 0M138 146a12 8 0 1 0 24 0a12 8 0 1 0-24 0"/>
<g class="occhi">
<circle cx="86" cy="118" r="13"/><circle cx="140" cy="118" r="13"/>
<circle class="pupilla" cx="90" cy="121" r="6"/><circle class="pupilla" cx="144" cy="121" r="6"/>
</g>
<path class="tratto" d="M68 96c8-8 20-10 30-6M128 88c10-2 22 2 28 10"/>
<path class="tratto" d="M96 168c10 6 26 6 34-2"/>
<path class="nuvoletta" d="M128 4h76a14 14 0 0 1 14 14v26a14 14 0 0 1-14 14h-40l-18 16 3-16h-21a14 14 0 0 1-14-14V18a14 14 0 0 1 14-14Z"/>
<text class="nuvoletta__testo" x="166" y="37" text-anchor="middle">Wait, what?</text>
</svg>
</div>
</div>
<div class="adesivo adesivo--cuore" aria-hidden="true" data-adesivo="cuore">
<div class="adesivo__corpo" data-corpo>
<svg viewBox="0 0 200 184" focusable="false">
<path class="bordo" d="M100 176C52 140 8 108 8 62 8 30 32 8 60 8c18 0 32 8 40 22 8-14 22-22 40-22 28 0 52 22 52 54 0 46-44 78-92 114Z"/>
<path class="cuore" d="M100 162C58 130 20 102 20 62c0-24 18-42 40-42 18 0 32 10 40 28 8-18 22-28 40-28 22 0 40 18 40 42 0 40-38 68-80 100Z"/>
<path class="luce" d="M46 56c2-12 10-20 22-22"/>
</svg>
</div>
</div>
</figure>
</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/SplitText.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.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.
30 valori da cambiare
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 «L’adesivo che segue le parole» da Animorio e adattala al mio sitoCosa fa
La citazione di un podcast comico inventato, Late Bloomers, su una pagina viola scuro. All’apertura le righe salgono una alla volta, ognuna dalla sua fessura, e poi compare la firma. Due parole sono color albicocca. Portando il mouse su «awkward», dal punto in cui sei spunta un adesivo con una faccia stupita e una nuvoletta, «Wait, what?»: cresce dal suo bordo basso con un rimbalzo morbido e poi resta appena sopra il puntatore, con un piccolo ritardo, come legato a un elastico corto. Se lo porti di lato si inclina nel verso della corsa, fino a novanta gradi se vai veloce, e appena ti fermi si raddrizza; anche gli occhi guardano da quella parte. Su «love» esce un cuore: si apre come una finestra tonda dal suo centro e, finché è fuori, batte. Uscendo dalla parola l’adesivo sparisce come è venuto.
Come funziona
Due scatole per ogni adesivo
L’adesivo sta nello stesso riquadro della citazione, in posizione assoluta. La scatola esterna va dove dice lo script: tre variabili CSS, --x e --y per il punto e --giro per l’inclinazione, e un transform che la sposta di metà larghezza a sinistra e di tutta l’altezza in su, così il puntatore sta sotto il suo bordo basso. La scatola interna entra ed esce con GSAP. Messi su due elementi diversi, il movimento che segue il puntatore e quello dell’uscita non si cancellano a vicenda.
Il ritardo, fotogramma per fotogramma
Gli eventi del puntatore scrivono solo il punto da raggiungere. A ogni fotogramma l’adesivo copre la quota FOLLOW della distanza che gli resta: 0,22 vuol dire poco più di un quinto, e il ritardo che si vede è questo. La quota è calcolata sul tempo vero passato dall’ultimo fotogramma, così uno schermo a 120 Hz lo muove come uno a 60.
L’inclinazione è la velocità
A ogni movimento la velocità è quanti pixel il puntatore ha fatto di lato dall’evento prima, per LEAN, tenuta entro MAX_LEAN gradi. L’inclinazione la raggiunge con la quota TURN e intanto la velocità perde a ogni fotogramma quello che SETTLE non tiene: se ti fermi torna a zero da sola, e l’adesivo si raddrizza senza che nessuno glielo dica.
Spuntare e aprirsi
La faccia parte da scala zero e opacità zero, con l’origine sul bordo basso, e arriva a uno in POP secondi con la curva BOUNCE, la cubic-bezier(0.4, 1.65, 0.3, 1) del sito, che va oltre e torna. Il cuore invece è ritagliato: clip-path passa da inset(50% round 50%), un cerchio di raggio zero al centro, a inset(-100% round 50%), più grande di tutto il disegno, con la stessa curva; intanto batte, con i numeri di BEAT: in 0,7 secondi diventa più grande di un decimo, gira di cinque gradi e torna.
Le righe e le parole
SplitText divide la citazione in righe e chiude ogni riga in una fessura; le righe salgono dal 120% della loro altezza in REVEAL secondi, una ogni STAGGER. Dividendo, SplitText rifà le parole: per questo gli eventi si ascoltano sulla citazione e non sulle singole parole, e le copie vuote che restano al taglio si tolgono, altrimenti sarebbero un secondo arresto invisibile del tasto Tab.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FOLLOW | script.js | 0.22 | Quanta strada recupera l’adesivo a ogni sessantesimo di secondo (nel sito 0,22). |
LEAN | script.js | 1 | Quanti gradi di inclinazione per ogni pixel fatto di lato in un evento (nel sito 1). |
MAX_LEAN | script.js | 90 | Il massimo dell’inclinazione, in gradi (nel sito 90). |
TURN | script.js | 0.18 | Quanto in fretta l’inclinazione raggiunge la velocità (nel sito 0,18). |
SETTLE | script.js | 0.82 | Quanta velocità resta dopo ogni fotogramma: più basso, si raddrizza prima (nel sito 0,82). |
POP | script.js | 0.45 | Quanto ci mette un adesivo a uscire (nel sito 0,45 secondi). |
BOUNCE | script.js | CustomEase.create('bounce', '0.4, 1.65, 0.3, 1') | La curva dell’uscita, che va oltre e torna (quella del sito). |
BEAT | script.js | [0.7, 1.1, 5] | Il battito del cuore: secondi per battito, quanto si ingrandisce e di quanti gradi gira (quelli del sito). |
STAY | script.js | 1.2 | Al telefono, quanti secondi resta l’adesivo dopo che il dito si è alzato. |
REVEAL | script.js | 1.2 | Quanto ci mette ogni riga a salire (nel sito 1,2 secondi). |
STAGGER | script.js | 0.08 | Il ritardo fra una riga e la successiva. |
Quando usarla
Per una citazione, un titolo o una frase di presentazione dove una o due parole meritano una sorpresa: chi passa col mouse trova un disegno, un ritratto o un oggetto del marchio, e il testo resta pulito per chi non ci passa.
Sul telefono
Uguale, col dito: l’adesivo esce dove tocchi, ti segue mentre trascini sulla parola e resta un secondo dopo che hai alzato il dito.
Con il movimento ridotto
Le righe compaiono con una dissolvenza; gli adesivi non seguono il puntatore e non si inclinano: compaiono e spariscono sfumando, fermi sopra la loro parola, e il cuore non batte.
Trappole
- Se lo script scrive il transform dell’adesivo per seguire il puntatore e l’uscita anima lo stesso transform, uno cancella l’altro a ogni fotogramma. Il punto e l’inclinazione vanno su un elemento, l’uscita sul suo figlio.
- SplitText rifà gli elementi annidati: gli ascoltatori messi prima sulle parole si perdono, e una parola tagliata al bordo lascia una copia vuota con lo stesso tabindex. Ascolta sul contenitore e togli le copie vuote.
- Dividendo in righe SplitText nasconde le righe ai lettori di schermo e mette il testo intero nell’aria-label: le parole da raggiungere col tasto Tab finirebbero dentro un elemento nascosto. Con aria: 'none' il testo resta com’è.
- Con pointerover e pointerout il puntatore che passa fra due lettere della stessa parola fa uscire e rientrare l’adesivo: si controlla che relatedTarget non sia nella stessa parola.
- pointerleave non risale fino ai genitori, ma un ascoltatore nella fase di cattura lo sente lo stesso: alcuni puntatori, come quelli guidati da uno script, mandano solo quello.
Librerie
GSAP 3.15.0, SplitText (GSAP) 3.15.0, Inter Tight (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,5 KB; le librerie: GSAP + SplitText + CustomEase 35 KB.
Collaudo
Provata il 8 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
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.
