Puoi creare animazioni allo scroll in Webflow in cui un logo, un modello 3D o una riga di testo se ne stanno centrati sullo schermo, per poi rimpicciolirsi con eleganza e scivolare nella navbar mentre scorri — tutto senza una sola riga di codice. Questa lezione ti guida attraverso quattro versioni di quell’effetto, usando le interazioni native while-scrolling e le variabili di Webflow.
Ecco cosa lo rende facile: non sono quattro tecniche diverse. È una sola tecnica con l’elemento animato che cambia. Una volta che vedi lo scheletro sotto, puoi metterci quasi qualsiasi cosa e ottenere lo stesso atterraggio elegante.
Come funziona
Lo scheletro. Tutto vive dentro un hero frame con altezza 200 VH — pensa a quel frame come alla pista dello scroll. Al suo interno, l’hero section è 100 VH e impostata per restare fissa in cima al viewport mentre scorri. Sopra c’è il big logo wrapper: display flex, allineato al centro, position: relative e alto 100 VH per riempire il viewport. Infine, la navbar è position: absolute (ancorata in alto, così non occupa spazio nel flusso) con l’altezza impostata in VH — qui 9 VH. Quella scelta del VH ovunque conta, perché Webflow non può animare un elemento tra due unità diverse. Altezza in VH per logo, wrapper e navbar significa che ogni valore resta intercambiabile e la matematica del centraggio funziona da sola, a qualsiasi dimensione dello schermo.
L’animazione e i suoi limiti. Una singola interazione while scrolling in view sull’hero frame guida tutto. Sono i suoi limiti a renderla giusta: parte quando l’elemento è completamente visibile (scegliere “starts entering” farebbe iniziare l’animazione a metà timeline, perché scatta nell’istante in cui l’elemento tocca il viewport), e finisce su “is fully invisible” con un offset del 50%. Lo smoothing è al 60% — abbastanza da sembrare fluido senza restare indietro rispetto allo scroll. L’animazione in sé sono poche action: rimpicciolire il big logo wrapper da 100 VH a 9 VH, e rimpicciolire ciò che sta al suo interno. Il numero cruciale è quel 9 VH finale — deve essere uguale all’altezza della navbar, altrimenti l’elemento centrato atterra sopra o sotto la linea centrale della navbar e il layout si rompe.
Quattro varianti, un solo setup. Tra un esempio e l’altro cambia solo il figlio animato. (1) Un logo embed: anima la sua altezza da circa 20 VH a 5 VH. (2) Un modello 3D Spline a tutto schermo: dagli un aspect ratio 16:9 così scala in modo pulito, poi anima la sua dimensione dal 100% al 90% del contenitore invece dell’altezza. (3) Testo centrato: collega la sua dimensione del font a una variabile in unità VW (così scala con la larghezza del viewport), poi anima quella variabile da 13 VW a 4 VW. (4) Testo a tutta larghezza allineato in basso: il wrapper è allineato in basso, quindi ri-centrarlo richiede due mosse — sposta il wrapper del testo su di metà dell’altezza del genitore per portare il suo bordo inferiore sul centro della navbar, poi sposta il testo giù di metà della sua altezza (2 VW, perché la dimensione del font finale è 4 VW con line-height 1, quindi il testo è alto 4 VW).
Le variabili sono la vera potenza. Poiché puoi animare una variabile e collegarla a una proprietà di stile, l’interazione può guidare CSS che normalmente non toccheresti direttamente. Qui una variabile percentuale è collegata al padding sinistro e destro della navbar, poi animata così che il padding orizzontale cresce mentre scorri. Una versione più raffinata anima anche l’altezza della navbar da 11 VH fino a 9 VH e applica un filtro invert per scurire il logo.
Perché l’offset del 50%. I 200 VH dell’hero frame sono la pista dell’animazione; l’offset decide dove finisce. Vuoi che l’animazione termini quando l’ultimo 100 VH del frame è completamente in vista (prima che inizi a entrare la sezione successiva). Il rapporto tra quella porzione e l’intero frame è 100 ÷ 200 = 0,5, da cui l’offset del 50%. Se vuoi che si concluda un filo prima, porta l’offset intorno al 55%, oppure sposta le action finali della timeline dal 100% a circa il 90–95%.
Come usarlo
-
Costruisci la pista. Crea un hero frame a 200 VH. Al suo interno, aggiungi una hero section a 100 VH impostata per restare fissa in cima al viewport mentre scorri. (Un wrapper di sfondo in posizione assoluta con un’immagine a copertura piena al ~30% di opacità è una rifinitura opzionale.)
-
Centra l’elemento. Dentro la hero section, aggiungi il big logo wrapper:
display: flex, allineato al centro,position: relative, altezza 100 VH. Metti dentro il tuo logo (o modello, o testo). Per un logo immagine, dimensionalo in VH così scala con il viewport. -
Imposta la navbar. Rendi la navbar
position: absolute, ancorata in alto,display: flex, con l’altezza in VH (es. 9 VH). Usare i VH qui è ciò che dopo permette al logo di atterrare esattamente centrato. -
Aggiungi l’interazione. Sull’hero frame, aggiungi un’animazione while scrolling in view. Imposta l’inizio su element is fully visible e la fine su is fully invisible con un offset del 50%. Metti lo smoothing intorno al 60%.
-
Anima il rimpicciolimento. Nella timeline, anima l’altezza del big logo wrapper da 100 VH a 9 VH (uguale alla navbar). Poi anima l’elemento interno — l’altezza del logo (es. 20 VH → 5 VH), la dimensione di uno Spline (100% → 90%), o la variabile della dimensione del font di un testo (13 VW → 4 VW).
-
Per il testo allineato in basso, allinea il wrapper in basso, poi ri-centra con due mosse di offset: il wrapper su di metà dell’altezza del genitore, e il testo giù di metà della sua altezza (2 VW per un font da 4 VW con line-height 1).
-
Guida altre proprietà con una variabile. Crea una variabile percentuale, collegala al padding sinistro e destro della navbar nel pannello stile (clicca il pallino viola per associarla), poi aggiungi due action variabile alla timeline — una sul valore iniziale, una sul finale — così il padding si anima mentre scorri. Se il padding non si aggiorna, modifica il valore della prima action e poi rimettilo com’era; a volte Webflow ha bisogno di quella spinta per registrarlo.
-
Rifinisci la sensazione. Hero frame più alto = animazione più lenta. Per concludere un po’ prima che appaia la sezione successiva, alza l’offset verso il 55% o tira indietro le action finali al ~90–95% della timeline. Aggiungi una versione mobile-portrait dell’interazione con altezze iniziali/finali adattate per la responsività.