Text Reveal Animations Scalabili in Webflow (Custom Element)

Puoi costruire una text reveal animation in Webflow che sia riutilizzabile, scalabile e facile da applicare — a un heading su una riga, a uno su più righe o a un pulsante in hover — con una sola action dentro la timeline dell’animazione. Il trucco è smettere di combattere gli elementi nativi di Webflow e usarne uno che forse hai trascurato: il Custom Element.

Parto dal “vecchio metodo”, perché è la versione che quasi tutti costruiscono, e vale la pena vedere esattamente dove si sfalda. Poi ricostruisco lo stesso effetto nel modo nuovo. Cronometrandomi, il vecchio metodo mi ha preso oltre sei minuti per heading; il nuovo meno di quattro — e, cosa più importante, il nuovo scala a heading più lunghi e su più righe con quasi nessun lavoro in più.

Tutta l’idea poggia su un piccolo cambio di prospettiva: lascia che sia una transition CSS ad animare, e lascia che il Custom Element porti il timing per lettera come CSS inline. Quando lo afferri, la timeline di Webflow si riduce a una singola action.

Come funziona

Il vecchio metodo, e perché fa male. Il setup classico maschera un heading (overflow: hidden), lo divide in uno span per lettera, imposta ogni span a display: inline-block così può ricevere una transform, poi costruisce un’interazione scroll-into-view che sposta ogni lettera in alto con un delay regolato a mano. Funziona, ma ogni lettera vuole la sua action, gli heading più lunghi ti costringono a rientrare nella timeline per aggiungerne, e gli heading nativi di Webflow non possono fare reveal su più righe senza un trucco che danneggia l’accessibilità. C’è anche una stranezza di Webflow da conoscere: due action create dallo stesso span vengono collegate allo stesso target, quindi conviene costruire la condizione iniziale dall’ultimo span per tenerle indipendenti.

Il Custom Element. Un Custom Element è un segnaposto che lasci cadere sul canvas (Ctrl/Cmd + E → “custom element”) e a cui poi assegni qualsiasi tag HTML dal pannello impostazioni. Imposta il suo Tag su h2 e è un h2. Imposta il Tag di un altro su span e diventa uno span a cui puoi anche dare un valore Text. Fondamentale: un Custom Element accetta qualsiasi attributo custom — incluso style, che ti lascia iniettare CSS inline. È proprio questa capacità a rendere possibile il nuovo approccio.

Perché l’animazione si riduce a una action. Nel nuovo setup, la classe condivisa degli span porta una transition transform (700ms, ease-out-cubic). Le animazioni di Webflow agiscono sulle proprietà CSS, quindi quando la tua timeline cambia una proprietà che ha già una transition corrispondente, è la transition ad animare — tu specifichi solo il valore finale, non durata o easing. Lo stagger, invece, nasce da un transition-delay impostato singolarmente su ogni span tramite il suo attributo style inline (0, 100, 200… millisecondi). Così la timeline ha bisogno solo di una condizione iniziale (spingere giù lo span wrapper per nascondere le lettere) e di una action (spostare le lettere su di -100%). Tutto il resto è CSS.

Ecco il markup finito dell’heading “The New Way”, ripulito dagli attributi che Webflow aggiunge per le interazioni, così vedi cosa stai davvero costruendo:

<h2 class="new-way_heading">
  <div class="h2_heading-line">
    <div class="h2_span-wrapper">
      <span class="h2_span" style="transition-delay: 0ms">T</span>
      <span class="h2_span" style="transition-delay: 100ms">h</span>
      <span class="h2_span" style="transition-delay: 200ms">e</span>
      <span class="h2_span" style="transition-delay: 0ms">&nbsp;</span>
      <span class="h2_span" style="transition-delay: 300ms">N</span>
      <span class="h2_span" style="transition-delay: 400ms">e</span>
      <span class="h2_span" style="transition-delay: 500ms">w</span>
      <span class="h2_span" style="transition-delay: 0ms">&nbsp;</span>
      <span class="h2_span" style="transition-delay: 600ms">W</span>
      <span class="h2_span" style="transition-delay: 700ms">a</span>
      <span class="h2_span" style="transition-delay: 800ms">y</span>
    </div>
  </div>
</h2>

Tre cose da leggerci dentro. Il delay vive in un vero attributo style su ogni span — in Webflow aggiungi un attributo chiamato style con valore transition-delay: 300ms, ed è esattamente la capacità che rende il Custom Element la scelta giusta. Gli spazi sono span a sé che contengono uno spazio insecabile ( ) — uno spazio normale collasserebbe tra elementi inline-block — e stanno a 0ms, quindi non consumano un passo della sequenza: gli undici span portano nove delay, da 0 a 800ms. E l’annidamento è di tre livelli: h2_heading-line è la maschera (overflow: hidden), h2_span-wrapper è ciò che la condizione iniziale spinge giù del 100%, e h2_span è ciò che la singola action sposta su di -100%. Sulla pagina pubblicata Webflow aggiunge il suo data-w-id a ogni span e scrive i transform inline mentre l’interazione gira — niente di tutto questo lo scrivi tu.

Come si usa

1. Costruisci l’heading con i Custom Element. Aggiungi un Custom Element e imposta il suo Tag su h2. Al suo interno, aggiungi un div block come heading line e dai a quello overflow: hidden (è la maschera). Dentro la riga, aggiungi un altro div come span wrapper. Dentro il wrapper, aggiungi un Custom Element per ogni lettera (e per ogni spazio vuoto), impostando il Tag di ciascuno su span e il suo Text sulla lettera che rappresenta.

2. Stila gli span una volta sola. Applica un’unica classe base a ogni span con display: inline-block (così le transform si applicano) e una transition transform di 700ms, ease-out-cubic. Niente combo class per lettera stavolta — una classe condivisa basta.

3. Aggiungi il timing per lettera come CSS inline. Sull’attributo style di ogni span, imposta transition-delay a un valore crescente — 0ms, 100ms, 200ms e così via. Nel progetto di riferimento i passi vanno da 0ms fino a 800ms con incrementi di 100ms, così l’intera parola si posa entro un secondo. Questo è lo stagger, e vive interamente fuori dalla timeline.

4. Costruisci l’animazione a una action. Seleziona l’heading, aggiungi un’interazione Scroll into view. Condizione iniziale: sposta lo span wrapper giù del 100% (si nasconde sotto la riga overflow: hidden). Poi una action: sposta gli span su di -100%. Nessuna durata, nessun delay, nessun easing sulla action stessa — la transition e i delay inline fanno tutto.

5. Estendi al multi-riga. Duplica la heading line (wrapper + span) per ogni riga aggiuntiva, e riutilizza la stessa animazione senza toccarla. Ritocca solo i valori di transition-delay — per esempio sfasa le lettere della seconda riga di 50ms perché le due righe entrino a cascata.

6. Adatta per un reveal in hover su un pulsante. Dai al wrapper di testo del pulsante overflow: hidden e position: relative. Metti dentro due copie del testo; imposta la seconda su position: absolute con un top offset del 100% così parte nascosta sotto. Dividi entrambe in span con delay come sopra, poi aggiungi un’interazione hover con una sola action che sposta gli span su di -100%, e una action hover-out che li riporta a 0%.

Nota: questo si costruisce elemento per elemento nel Designer, non incollando il markup — l’HTML qui sopra è il risultato a cui devi arrivare, non qualcosa da incollare in un Embed (un Embed non può contenere un heading che vuoi far animare dalle interazioni Webflow). Clona il progetto se preferisci partire da una copia funzionante.