Puoi ottenere un’animazione GSAP al caricamento perfettamente pulita in Webflow — niente flash, niente salto — con un pattern piccolo e riutilizzabile da mettere in qualsiasi progetto. Webflow oggi include la gestione automatica del FOUC per le interazioni GSAP, e copre parecchi casi. Ma su pagine pesanti e layout complessi puoi ancora beccare un flicker proprio al primo caricamento: ecco come prenderne il pieno controllo.
Non è un trucco improvvisato. È capire un piccolo scarto di tempismo tra quando il browser disegna la pagina e quando GSAP applica gli stati iniziali dell’animazione — e chiuderlo con tre righe di CSS più una singola action GSAP. Una volta che vedi perché succede, userai lo stesso rimedio ogni volta.
Come funziona
Quando GSAP guida un’animazione al caricamento, gli serve un breve istante — dopo che la pagina inizia a renderizzare — per applicare le condizioni iniziali: opacity di partenza, posizione o transform da cui ogni elemento parte. Finché quell’istante non arriva, il browser ha solo i tuoi stili Webflow normali, quindi disegna gli elementi nel loro stato finale. Poi GSAP entra in gioco, li riporta al punto di partenza dell’animazione e la fa partire. Quello scatto — stato finale, poi di colpo lo stato iniziale — è il flicker. Più la pagina è pesante, più il browser ci mette ad arrivare a GSAP, più il flash si nota.
La soluzione è nascondere le cose finché GSAP non è pronto. L’istinto è nascondere ogni elemento animato, ma diventa subito un pasticcio. Meglio nascondere il wrapper più interno che li contiene tutti: abbastanza ampio da coprire l’intera animazione, abbastanza stretto da non oscurare parti della pagina che non c’entrano. Porti l’opacity di quel wrapper a 0 e niente al suo interno può lampeggiare.
Dove metti quel CSS conta. Non nel Designer — il wrapper sarebbe invisibile mentre lavori. Non dentro l’interazione GSAP — a GSAP serve comunque il suo istante, quindi sposteresti solo il flicker sul wrapper. Va nel <head> della pagina, che il browser legge e applica prima di disegnare il contenuto. Quando qualcosa compare a schermo, il wrapper è già a opacity 0.
L’ultimo pezzo è la sicurezza. Il CSS nasconde il wrapper, ma qualcosa deve riaccenderlo — e quel qualcosa è GSAP, che sa esattamente quando l’animazione è pronta. Se un visitatore ha JavaScript disattivato, GSAP non parte mai, quindi devi assicurarti che nemmeno la regola di nascondimento parta. Altrimenti il contenuto resta invisibile per sempre. Webflow ti dà un aggancio pulito per questo: la classe w-mod-js.
Come si usa
-
Individua il/i wrapper da nascondere. Scegli il contenitore più interno che racchiude ogni elemento animato. Nella demo gli elementi animati stanno in due punti — la navbar e la hero — quindi invece di nascondere l’intero page wrapper ne colpiamo due: il nav wrapper e la sezione video.
-
Marcali con un attributo custom. Invece di destreggiarti tra selettori di classe e combo class, dai a ogni wrapper lo stesso attributo custom — chiamalo
remove-flicker(senza valore). Applicalo al primo elemento, poi copia-incollalo sugli altri. -
Nascondili dal
<head>. In Impostazioni pagina → Inside<head>tag, aggiungi un blocco di stile che colpisce l’attributo e lo limita a JavaScript attivo:<style> .w-mod-js [remove-flicker] { opacity: 0; } </style>[remove-flicker]colpisce ogni elemento che porta l’attributo, qualunque siano le sue classi. Il prefisso.w-mod-js— una classe che Webflow aggiunge a<html>solo quando JS è in esecuzione — fa sì che la regola si applichi solo quando GSAP riporterà davvero visibili gli elementi. -
Riaccendili con GSAP. Apri l’interazione al caricamento e aggiungi una nuova action (chiamala remove flicker). Imposta il target type su Attribute e il nome attributo su
remove-flicker. Poi rendila istantanea: duration0, start0, type to, property opacity, value 100%. Niente easing, niente delay — i wrapper passano da invisibili a visibili nell’istante in cui GSAP dà il via. -
Pubblica e prova sul link live. Il flicker compare solo sul sito pubblicato, quindi controlla lì — ricarica qualche volta e apri in una nuova scheda. Navbar e heading ora dovrebbero caricare puliti ogni volta.