Repeat, Runs On e Conditional Playback in Webflow

Gli interaction settings GSAP di Webflow — repeat, runs on e conditional playback — sono la differenza tra un’animazione che semplicemente funziona e una che va in loop pulito, performa bene su scala e tratta ogni visitatore con rispetto. Questa lezione attraversa quattro pattern in loop (una marquee, testo a cascata, un pulsante allo scroll, uno stagger in hover) e poi i due settaggi che contano di più per i siti veri.

La protagonista è una distinzione che confonde quasi tutti: il repeat esiste in due punti — sull’interazione e su ogni action — e non significano la stessa cosa.

Come funziona

Repeat di interazione vs repeat di action. Il repeat a livello di interazione fa ripetere l’intera timeline — ogni action insieme — come un gruppo. Quello a livello di action fa ripetere una singola action in modo indipendente. Per una marquee, che è una sola action che muove una striscia da 0% a -100% su X, i due sono equivalenti: ripeti la action all’infinito o ripeti l’interazione all’infinito, ottieni lo stesso scorrimento infinito. Ma appena una timeline ha più action, divergono nettamente. Un loop di testo a cascata con quattro action (text-out, text-in, arrow-out, arrow-in) deve andare in loop come gruppo — questo è il repeat di interazione. Applica invece infinite a ogni action e si desincronizzano nel caos: il testo si resetta mentre la freccia è a metà corsa.

Repeat di action + back and forth è dove diventi chirurgico. “Back and forth” riproduce una action in avanti e poi all’indietro a ogni ciclo. Combinato con un conteggio di repeat, puoi comporre pattern esatti. Nell’esempio allo scroll le lettere del pulsante devono uscire e rientrare due volte e poi fermarsi, mentre il cerchio dietro pulsa per sempre. La action delle lettere usa repeat 3 con back-and-forth (out-in-out-in-out-in → finisce ferma), e la action del cerchio usa infinite + back-and-forth (espandi-contrai per sempre). Solo il repeat a livello di action può far ciclare una parte mentre un’altra si ferma — il repeat di interazione farebbe ciclare tutto.

Runs on decide quali pagine caricano un’interazione. Di default è la pagina in cui l’hai costruita, ed è voluto: impostalo su “all pages” e Webflow spedisce quel JavaScript a ogni pagina — parsandolo, valutandolo, cercando un target che potrebbe non esistere — anche dove è irrilevante. Su un sito da 30 o 50 pagine questo pesa. Limitare “runs on” alle pagine che servono è una vera ottimizzazione di performance, gratis.

Conditional playback è la leva per accessibilità e responsività, e fa due cose. Primo, legge la feature prefers-reduced-motion del browser — l’impostazione di sistema “riduci movimento” che chi ha disturbi vestibolari o sensibilità al movimento attiva — e ti fa disabilitare l’interazione o saltarla alla fine per quegli utenti. Parallasse, movimenti rapidi, scaling e loop possono davvero causare disagio, quindi rispettarla non è un optional. Secondo, ti fa scegliere su quali breakpoint gira un’interazione, così un effetto desktop pesante può semplicemente non partire su mobile, dove sarebbe soverchiante o metterebbe in crisi un dispositivo poco potente.

Come si usa

1. Marquee (repeat di interazione). Metti due gruppi di contenuto identici affiancati in un wrapper flex con overflow: hidden; imposta i flex child su don’t shrink or grow. Anima la X del gruppo da 0% a -100%, easing lineare, poi imposta repeat: infinite sull’interazione (o sulla singola action — qui è equivalente).

2. Testo a cascata (repeat di interazione). Costruisci la sequenza come action separate (text-out, text-in, arrow-out, arrow-in), usando from to sulle action “in” con un “from” a segno invertito così gli elementi cadono da sopra invece di invertire. Imposta repeat: infinite sull’interazione così tutte e quattro vanno in loop insieme, sincronizzate.

3. Pulsante allo scroll (repeat di action). Attiva allo scroll con trigger actions (non scrub-on-scroll) quando il pulsante arriva a metà viewport. Dai alla action delle lettere repeat: 3 + back and forth; a quella del cerchio infinite + back and forth. Solo il cerchio va in loop per sempre.

4. Regola runs on e conditional playback. Imposta runs on solo sulle pagine che usano l’interazione. Apri conditional playback e scegli un comportamento per prefers-reduced-motion (disabilita o salta alla fine) e i breakpoint su cui l’animazione deve girare.