Premessa
Tra le direzioni del reveal c’è il flip 3D: l’elemento entra ruotando attorno all’asse verticale (effetto anta), orizzontale, effetto rotazione combinato o lungo la diagonale sinistra o destra e .
Le varianti sono quattro e cambiano solo l’asse attorno a cui ruota l’elemento. Sull’asse verticale entra come un’anta che si apre; sull’asse orizzontale si ribalta in avanti, come una pagina che cade; lungo la diagonale arriva di sbieco, con due versioni speculari a seconda dell’angolo di partenza. La quarta combina rotazione verticale e orizzontale nello stesso movimento, così la card sembra ribaltarsi di taglio. È sempre la stessa tecnica: cambia l’asse, non il metodo.
L’ho isolato in un articolo a sé perché nasconde la trappola più istruttiva del progetto: la tentazione di mettere la prospettiva (transformPerspective) dentro l’animazione, insieme alla rotazione. Il risultato è sbagliato, perché anche la prospettiva si anima da un valore all’altro e la rotazione sembra partire da mezzo giro, distorta. La regola che ne ho ricavato vale per qualsiasi animazione 3D, non solo per il flip: la prospettiva si imposta fissa una volta, con gsap.set, prima dell’animazione, insieme a transform-origin centrato e backface nascosta. Si anima solo la rotazione, ed è una di quelle cose che non vedi finché non le trovi rotte a schermo.
Prova il reveal dal vivo
Scorri verso il basso: ogni blocco entra ruotando appena raggiunge il viewport. Lo stesso flip vale su una card di testo come su un’immagine.
Flip orizzontale (anta)
Entro ruotando come un’anta.
Flip verticale
Io mi ribalto sull’asse orizzontale.
Flip diagonale sinistra
Flip combinata destra
Prova lo scroll reveal dal vivo
Scorri verso il basso: ogni blocco ruota con lo scroll della pagina. Lo stesso flip vale su una card di testo come su un’immagine.
Flip orizzontale (anta)
Entro ruotando come un’anta.
Flip verticale
Io mi ribalto sull’asse orizzontale.
Flip diagonale sinistra
Flip combinata destra
Senza JavaScript
Senza JavaScript o in modalità ridotta la card e l’immagine restano visibili e piatte nel flusso normale, senza rotazione: il contenuto è sempre leggibile.
Per maggiori informazioni contattami a info@davidemugnaini.it.