EN IT
Home Chi sono Learn Blog

Un sistema di marquee infinite riutilizzabile in Webflow

Intermedio 47:44 webflowgsapmarqueeanimazioniattributi

Costruisci una marquee a loop infinito in Webflow con GSAP che va in qualsiasi direzione ed è riutilizzabile su tutto il sito con un singolo attributo — senza ricostruzioni.

Guarda su YouTube

Punti chiave

  • Una marquee infinita senza scatti serve due trail group identici affiancati; animando un gruppo di -100% della propria larghezza e mettendolo in loop, il secondo scivola a prenderne il posto.
  • Muovi il trail group di -100% (non di un valore in pixel o vw) così il loop è indipendente da quanti elementi ci sono e da quanto sono larghi — una soluzione davvero generale.
  • Metti overflow: hidden sul main container (via combo class), mai sul body; così la marquee visibile resta dentro la larghezza del contenuto invece di stirarsi da bordo a bordo.
  • Rendi l'interazione riutilizzabile con un attributo data-animate e un targeting "any element → direct child of → attribute", così una sola interazione guida ogni marquee a prescindere dalle classi.
  • La direzione è solo quale asse e quale verso: X per orizzontale, Y per verticale, entrambi per diagonale; inverti animando da -100% verso 0 invece che da 0 a -100%.

Capitoli del video

  1. 00:00 Intro
  2. 00:48 Costruire la struttura iniziale
  3. 09:58 Costruire l'interazione principale
  4. 17:04 Capire come deve funzionare il loop infinito
  5. 24:50 Ottimizzare l'interazione con gli attributi custom
  6. 27:26 Costruire una marquee orizzontale invertita
  7. 29:32 Costruire una marquee diagonale
  8. 30:59 Costruire una marquee diagonale invertita
  9. 31:50 Aggiungere un hover CSS agli elementi della marquee
  10. 33:52 Mettere in pausa la marquee in hover
  11. 38:21 Costruire una marquee verticale
  12. 44:52 Costruire una marquee verticale invertita
  13. 46:40 Outro

La marquee è uno dei componenti più amati dai designer e uno dei più odiati da chi deve costruirla per bene. Questa lezione ne costruisce una vera da un canvas vuoto — non solo una marquee che scorre, ma un sistema: senza scatti in qualsiasi direzione, riutilizzabile su tutto il sito con un singolo attributo, e abbastanza solido da fidartene in produzione.

Più del risultato, qui conta il ragionamento. Ogni “perché” — perché due copie, perché -100%, dove va l’overflow, perché un attributo — è ciò che trasforma uno snippet copiato in una tecnica che padroneggi.

Come funziona

Due trail group rendono il loop senza scatti. Una singola riga di elementi non può andare in loop pulito — quando esce non c’è nulla dietro, quindi ottieni un gap e un reset brusco. Il fix è duplicare tutto il contenuto in due gruppi identici (ciascuno un div con classe section_marquee-trail) affiancati dentro un section_marquee in flex. Anima i gruppi verso sinistra, e proprio mentre il primo esce del tutto, il secondo è esattamente dove il primo era iniziato — resetti all’istante e si legge come una striscia infinita.

Anima di -100%, non di una larghezza misurata. L’approccio ingenuo anima il container di un valore calcolato (larghezza item × numero). È fragile: si rompe appena gli item hanno larghezze diverse o ne aggiungi uno. Dato che i due trail group hanno larghezza identica, animarli di -100% della propria larghezza porta sempre il secondo gruppo dove il primo era iniziato — a prescindere da quanti item o da quali dimensioni. È la soluzione generale. (Durata ~40s, easing linear così lo scorrimento è perfettamente costante. Imposta il flex sizing dei trail group su don’t shrink or grow così prendono la loro larghezza naturale.)

Overflow sul container, mai sul body. Per nascondere il contenuto fuori schermo, metti overflow: hidden sul main container tramite una combo class (is-marquee) invece che sulla classe base — così la marquee visibile resta legata alla max-width del contenuto, che di solito è la resa migliore, senza toccare il container ovunque. Mettere overflow hidden sul body è un no assoluto.

Un attributo la rende riutilizzabile. Invece di ricostruire l’interazione per ogni marquee, dai a ogni wrapper un attributo data-animate (es. horizontal-marquee) e imposta il target della action su any element → direct child of → attribute. Questo anima i due trail group di qualsiasi marquee che porta l’attributo, indipendentemente dalle classi — così una sola interazione le alimenta tutte (lascia deselezionata la casella “first match only”, dato che i figli sono due).

La direzione è solo asse + segno. Da questa base ogni variante è un piccolo cambio: l’orizzontale anima move X; la verticale anima move Y; la diagonale anima entrambi. Inverti qualsiasi di esse animando da -100% verso 0 invece che da 0 a -100%. Mettere in pausa in hover è un’interazione hover separata (control pause sul mouse-enter, resume sul mouse-leave), e puoi aggiungere un hover CSS sugli item stessi per dare più vita.

Come si usa

  1. Struttura. Section → main container (con una max-width) → section_marquee (display flex). Dentro, avvolgi tutti gli item in un div section_marquee-trail (flex), poi duplica quel trail così ci sono due gruppi identici. Imposta il flex sizing dei trail group su don’t shrink or grow; aggiungi un piccolo margine destro agli item per la spaziatura.

  2. Ritaglia. Aggiungi una combo class is-marquee al main container con overflow: hidden e padding orizzontale a zero.

  3. Interazione principale. Interazione GSAP al page-load. Dai al wrapper section_marquee data-animate="horizontal-marquee". Action: target any element → direct child of → data-animate=horizontal-marquee, anima move X a -100%, durata ~40s, linear, repeat: infinite.

  4. Varianti. Duplica la sezione, cambia il valore dell’attributo (es. reversed-horizontal-marquee) e il target della action di conseguenza. Invertita = anima move X da -100% a 0. Verticale = anima move Y. Diagonale = anima X e Y insieme. Diagonale invertita = ribalta entrambi.

  5. Pausa in hover. Aggiungi un’interazione hover sulla marquee: mouse-enter → control pause, mouse-leave → control resume.

Risorse

Domande frequenti

Come faccio andare in loop una marquee senza gap o scatti?
Duplica il contenuto della marquee in due trail group identici affiancati. Anima il gruppo di -100% della propria larghezza e mettilo in loop — quando il primo gruppo esce, il secondo occupa esattamente la posizione da cui il primo era partito, così il reset è invisibile e il loop sembra infinito.
Perché animare di -100% invece che di un valore fisso in pixel o vw?
Perché -100% è relativo alla larghezza del trail group stesso, così il loop funziona a prescindere da quanti elementi contiene e da quanto è largo ciascuno. Un valore fisso in pixel/vw funziona solo per un numero e una dimensione specifici, e non è una soluzione riutilizzabile.
Dove metto overflow: hidden per una marquee?
Sul main container, via combo class (es. is-marquee) così non tocchi il container base ovunque. Non mettere mai overflow: hidden sul body. Metterlo sul container tiene la marquee visibile dentro la max-width del contenuto invece di stirarla fino ai bordi del viewport.
Come riutilizzo una sola interazione marquee su marquee con classi diverse?
Dai a ogni wrapper di marquee un attributo custom condiviso tipo data-animate="horizontal-marquee", poi imposta il target della action su "any element → direct child of → attribute" puntando a quell'attributo. Una sola interazione anima ora i trail group di ogni marquee corrispondente, indipendentemente dalle classi.
Come cambio la direzione di una marquee?
Scegli l'asse e il segno. L'orizzontale anima move X, la verticale anima move Y, la diagonale anima entrambi insieme. Per invertire una direzione, ribalta l'animazione così va da -100% verso 0 invece che da 0 a -100%.

← Torna al corso