In questa lezione creerai un’animazione 3D delle card allo scroll in Webflow — quella in cui le card salgono una dopo l’altra e sfumano indietro nello spazio mentre scorri, perfetta per un muro di testimonial o per un processo passo-passo. E la costruirai senza una riga di codice, usando le interazioni native di Webflow.
Sembra sofisticata, ma si riduce a poche idee oneste: una section alta per lo spazio di scroll, un container sticky che tiene tutto al suo posto, una timeline che trasforma lo scroll in movimento e un tocco di perspective per la profondità. Imposta bene il setup e l’animazione si costruisce quasi da sola.
L’altro tema silenzioso qui è la responsività. Ogni valore è pensato in unità viewport così tutto si adatta ai vari dispositivi — perché un’animazione che sta bene solo sullo schermo su cui l’hai costruita non è finita. L’esperienza utente viene prima di tutto.
Come funziona
La scena: una section alta più un container sticky. La section è impostata molto più alta dello schermo (nel progetto è 600VH) così c’è tanto scroll con cui lavorare — e quell’altezza è ciò che controlla la velocità: più alta, più lenta. Al suo interno, il container principale è dove avviene la magia. Imposta la sua altezza a 100VH e, cosa fondamentale, la position su sticky con top a 0. Questo lo blocca in cima al viewport per tutta la section, così le card restano ferme e riproducono la loro animazione mentre continui a scorrere. Dimentica questa impostazione e non funziona nulla.
Il layout, dimensionato per ogni schermo. Un padding-top di 10VH tiene tutta l’esperienza comodamente dentro il viewport, e l’heading wrapper riceve un’altezza fissa di 25VH così c’è sempre respiro sotto di esso — a prescindere dalla dimensione del font — prima che inizino le card. Le card stesse sono in posizione assoluta e impilate una sopra l’altra dentro una card list, dimensionate in percentuali con una max-width così non esplodono su schermi enormi. Le unità VH compaiono ovunque di proposito: sono ciò che rende l’animazione responsive per natura.
La profondità: perspective sul genitore, translateZ sui figli. Questo è il modello mentale da tenere. Per ottenere il vero 3D, imposti una children perspective sull’elemento genitore — la card list riceve una children perspective di 3000px, e la sua position è relative così fa da riferimento per le card in posizione assoluta. La perspective è come la distanza tra il tuo occhio e la scena: sta sul container. Il movimento sta su ogni figlio — animare il translateZ di una card verso un valore negativo la allontana da te, e poiché il genitore ha la perspective, questo si legge come un allontanarsi in profondità invece che come un semplice rimpicciolirsi. Il genitore tiene la lente; i figli si muovono.
La timeline: movimenti che puoi contare. L’animazione è applicata alla section come interazione “while scrolling in view”. Decidi prima la storia — la card in primo piano parte mezza visibile, le altre nascoste sotto il fold, e ognuna sale a turno come carte tenute in mano. Sei card significano sei movimenti, quindi dividi la timeline in modo grosso modo uniforme, guardi l’anteprima, poi pareggi i keyframe per riempire lo spazio rimasto. Poi aggiungi la profondità: mentre ogni card si posa, quelle dietro continuano a salire di un soffio e ad arretrare lungo Z, e un overlay della card sfuma da trasparente a una leggera tinta scura per accentuare il senso di distanza.
Come si usa
-
Prepara la scena. Dai alla section un’altezza elevata (es. 600VH) per lo spazio di scroll — ricorda, più alta = più lenta. Al suo interno, aggiungi un container principale: altezza 100VH, position: sticky, top: 0. Aggiungi un padding-top (es. 10VH) così tutto resta dentro il viewport.
-
Imposta il contenuto. Aggiungi un heading wrapper con altezza fissa (es. 25VH) così c’è spazio garantito sotto di esso. Poi una card list che contiene le tue card. Dimensiona le card in VH/percentuali con una max-width, rendi ogni card in posizione assoluta così si impilano, e imposta la position della card list su relative.
-
Aggiungi la perspective. Sulla card list, imposta una children perspective (es. 3000px). È questo che trasforma i tuoi movimenti Z in vera profondità — senza, le card si limiterebbero a ridimensionarsi.
-
Costruisci il movimento base. Aggiungi un’interazione “while scrolling in view” alla section. Per ogni card, aggiungi una move action che la fa partire nascosta sotto il fold (un offset Y positivo) e un secondo keyframe che la porta a Y 0. Conta le card, dividi la timeline in altrettanti movimenti uniformi, guarda l’anteprima, poi aggiusta i keyframe così l’ultimo cade vicino alla fine (nel progetto si sono assestati su keyframe a 9, 27, 45, 63, 81, 99%).
-
Aggiungi la profondità 3D. Per le card dietro a quella corrente, aggiungi keyframe che le spostano leggermente in su (un piccolo Y negativo) e indietro lungo Z (un translateZ negativo crescente) mentre lo scroll prosegue, così arretrano man mano che arrivano nuove card. Assicurati che il transform Z sulle move action precedenti sia a 0 così non va in conflitto con la profondità.
-
Aggiungi la tinta dell’overlay. Dai a ogni card un overlay in posizione assoluta con pointer-events: none. Anima il suo sfondo da trasparente a un colore scuro tenue attraverso gli stessi keyframe, così le card si scuriscono sottilmente mentre si allontanano.
-
(Opzionale) Combina con lo scroll-into-view. Aggiungi un’interazione separata “scroll into view” sull’elemento card per animare qualcosa al suo interno (es. delle lettere che scorrono a sovrapporsi) mentre entra, ripristinandolo allo scroll out of view. Attivala sulla classe condivisa della card così Webflow la applica automaticamente a ogni istanza, e regola l’offset per temporizzarla bene.
-
Controlla la responsività e pubblica. Poiché hai costruito in VH fin dall’inizio, gran parte del lavoro è fatta — applica i soliti ritocchi di dimensione per breakpoint, pubblica e testa il link live sui vari formati di schermo.