GSAP e scroll storytelling: quando il motion racconta

In breve

• Tre compiti per GSAP: entrate, scroll, una transizione.
• Scroll storytelling come sequenza: battute, pause, un elemento in movimento e il resto fermo.
• Quando ha senso: il motion serve quando la visita è parte del brand; su un documento da consultare è rumore.
• Movimento ridotto: con prefers-reduced-motion lo stato finale compare subito, senza pin e senza loop.
• Lenis solo se serve: quando lo scroll è lo strumento del racconto. Su NAYT sì, su POLI.design no.
• WebGL è un altro lavoro: servizio correlato: siti web animati.

Tre lavori per GSAP

GSAP è la libreria con cui scrivo il tempo della pagina, su Next.js e su WordPress. Se il file non ha una sequenza, la prima domanda è: quali entrate, dov'è lo scroll, serve davvero una transizione?

1. Entrate: un blocco arriva quando entra nel viewport: spostamento corto, stagger breve, easing coerente. Il testo è già in HTML; lo stato iniziale sta in CSS. Un titolo invisibile fino al callback è un bug.
2. Scroll: ScrollTrigger lega una timeline alla posizione della pagina. O la sezione entra e l'animazione parte, o — scrub — l'animazione segue la barra di scorrimento. Il pin tiene ferma una sezione per un capitolo, poi la rilascia. Una homepage tutta pinnata costringe chi cerca footer, prenotazione o carrello a guardarsi il film.
3. Una transizione: tra due pagine o due stati, disegnata con lo studio, interrompibile, pulita al cambio route. Su NAYT la transizione di pagina è progettata con un designer di riferimento.

Fuori da questi tre non uso GSAP. Un hover è CSS; lo stato di un componente React spesso è Framer Motion. Diesel Farm usa entrambi: GSAP per il racconto, Framer Motion per i componenti. Maoten usa GSAP, ScrollTrigger e Lenis: la partitura è lo scroll della pagina.

Una sequenza, con un ritmo

Lo scroll storytelling è un montaggio:

• battuta: un'idea, un cambio d'immagine, una frase che arriva da sola;
• tenuta: un tratto di scroll in cui non succede nulla, perché la frase va letta;
• densità: quante battute per schermata.

Se tutto si muove, non c'è una frase. Se nulla si muove, non c'è sequenza — e per molte pagine è giusto così.

La sequenza si decide prima dei trigger, sul file di chi ha disegnato: studi di design, art director e designer freelance. Se la richiesta è «anima questo», chiedo quali schermate sono battute e quali solo layout.

Il testo fa parte del ritmo. Se ricevo un opuscolo da «mettere in scroll», prima si taglia. Con Prismic o WordPress la lunghezza dei campi si accorda con il design: un titolo pensato per una riga che diventa un paragrafo sposta il pin.

In una battuta si muove una cosa sola. Il controllo prima di chiudere:

1. spengo il motion e la pagina regge;
2. tolgo un effetto e sparisce una battuta precisa;
3. arrivo a prenotare, al carrello o all'indirizzo senza finire il capitolo.

Quando il motion racconta il brand

Il motion ha senso quando il tempo è il modo di incontrare il brand: un luogo con un prima e un dopo, un percorso che finisce in un gesto (prenotare, entrare nello shop, leggere un dato), una visualizzazione che ha bisogno di un asse temporale. Se lo studio ha già la regia, il mio lavoro è farla reggere a caricamento, resize, ritorno sulla pagina e contenuti reali.

È rumore quando la pagina ha un altro compito: telefono, PDF, orari, scheda prodotto, articolo lungo, elenco. Anche un pin su una pagina legale, uno stagger che ritarda l'H1, il testo leggibile solo a fine timeline.

Diesel Farm e OTRO hanno ricevuto una Awwwards Honorable Mention nel 2024 perché il motion era la struttura del sito, non uno strato aggiunto alla fine.

Entrate, scroll e una transizione non cambiano da soli l'ordine di grandezza della stima; lo fanno pagine, lingue, CMS, shop e 3D. Approfondimento: costo di un sito animato.

Movimento ridotto, e Lenis solo se serve

prefers-reduced-motion è un ramo della stessa timeline. Con gsap.matchMedia, se la preferenza è attiva: niente scrub né pin, stato finale subito, nessun loop, transizioni come tagli, testo sempre visibile. Meno animazione, non animazione più lenta.

Telefono: il pin litiga con la barra del browser e non c'è hover. Spesso la versione mobile è la sequenza già aperta, capitoli in colonna, scroll nativo. La provo sul telefono.

Peso: GSAP non è il problema. Lo sono animare il layout invece di transform e opacity, pin su immagini senza misure, canvas legati allo scroll, trigger su centinaia di nodi. Testo e primo paint: siti animati e SEO.

Lenis sostituisce lo scroll nativo con un valore interpolato, così lo scrub è continuo. Ha un costo: ancore, posizione al ritorno, ricerca nella pagina, altezze che cambiano con il CMS.

• Sì: NAYT, Think Liquid, Contraste, OTRO, Diesel Farm, GreenWaves — lo scroll è la struttura.
• No: articoli, FAQ, elenchi, pagine con altezze che cambiano spesso. POLI.design, Colombo New Scal e Wolf VA hanno GSAP senza Lenis.

Con il movimento ridotto Lenis si spegne.

Cinque siti, cinque decisioni

OTRO

OTRO, 2024, con un designer di riferimento, alternativeotro.it. Three.js, GSAP, Lenis; Awwwards Honorable Mention. GSAP è la coreografia della pagina, Three.js la scena. Il testo resta in HTML accanto al canvas; i due strati restano distinti.

Diesel Farm

Diesel Farm, Brave Wine Company, design di uno studio partner, 2024, dieselfarm.com; Awwwards Honorable Mention. Shopify per catalogo e checkout, Next.js e Prismic per la vetrina, GSAP, Framer Motion e Lenis. Lo scroll racconta la tenuta; prodotto, prezzo e carrello restano raggiungibili senza finire il capitolo.

Think Liquid

Think Liquid, 2024, con un designer di riferimento, thinkliquid.no. GSAP e Lenis, senza Three.js. «Animato» non significa «scena 3D»: il racconto sta nell'ordine e nella durata.

Contraste

Contraste, brand culinario milanese, cliente Polo Sur, con un designer di riferimento, 2024, contrastemilano.it. Next.js, Prismic, GSAP, Lenis. Il motion tiene il tono della sala e lascia a portata di scroll la prenotazione. Menu, indirizzo e orario restano informazioni.

POLI.design

POLI.design, Politecnico di Milano, 2022, per uno studio digitale milanese, tema WordPress custom, polidesign.net. D3.js disegna i dati, GSAP accompagna la visualizzazione. Niente Lenis, niente WebGL: il movimento serve a leggere un dataset.

Una scena WebGL è un altro lavoro

GSAP muove il documento. Una scena WebGL — Three.js, React Three Fiber, shader — è un canvas con un loop di render, modelli e un fallback. Servizio correlato: esperienze 3D e WebGL.

• OTRO e NAYT hanno entrambi gli strati (su NAYT, transizioni GSAP e lo starfield Three.js dell'area Habitat).
• Think Liquid, Contraste e POLI.design non hanno una scena.
• Diesel Farm racconta la tenuta nel documento, senza Three.js.

Il testo non entra nel canvas; la scena parte dopo il contenuto e con il movimento ridotto può restare ferma. Un loader a tutto schermo finché WebGL è pronto è un ritardo, non una transizione.

Domande frequenti

GSAP o CSS?

CSS per hover e transizioni brevi di interfaccia. GSAP per una sequenza, lo scroll, una timeline da interrompere e pulire.

GSAP o Framer Motion?

Framer Motion per lo stato di un componente React; GSAP quando la timeline è il design e coordina molti elementi o lo scroll. Su Diesel Farm convivono.

Lenis va messo sempre, se c'è ScrollTrigger?

No. ScrollTrigger funziona con lo scroll nativo. Lenis entra solo per uno scrub continuo, accettandone i costi.

Il testo può comparire solo a fine animazione?

No. È in HTML al primo paint; con il movimento ridotto è già al suo posto.

Si può fare su WordPress?

Sì: POLI.design, Colombo New Scal, Wolf VA, GreenWaves. Il rischio è un page builder che cambia il markup o un plugin con una seconda copia di GSAP.

Il motion cambia l'ordine della stima?

Da solo no. Va stimato però il tempo per la versione mobile e quella a movimento ridotto. Approfondimento: costo.

La mia scelta

Quando uno studio arriva con una sequenza definita, la sviluppo in GSAP entro questi tre compiti, senza aggiungere altro. Se il file indica solo «da animare», chiedo quali momenti costituiscono il racconto. Lenis solo se lo scroll è lo strumento; WebGL solo se qualcosa va visto nello spazio. Con la sequenza disattivata, il sito resta pienamente leggibile.