Premessa
Le animazioni allo scroll sono una di quelle cose che sembrano facili finché non le devi fare bene. Reveal degli elementi che entrano, sezioni che si bloccano e scorrono in orizzontale, card che si impilano: effetti che si vedono sempre più spesso nei siti curati e di design.
Questo plugin nasce per agevolare l’inserimento degli effetti animati con i blocchi Gutenberg. Il motore si carica solo dove serve e non ci sono dipendenze esterne.
La scelta di fondo: blocchi, non shortcode, non page builder
Tutto è esposto come blocchi Gutenberg nativi. Niente shortcode da ricordare, niente meta box, niente dipendenza da un page builder: un blocco “Animazione” che avvolge altri blocchi e li anima, più alcuni blocchi dedicati.
Il motore è GSAP con ScrollTrigger, lo standard di fatto per le animazioni allo scroll. Li ho ospitati in locale, dentro assets/js/vendor/, invece di caricarli da CDN: una richiesta esterna in meno, nessun tracciamento di terze parti, versione bloccata e prevedibile.
Caricare GSAP solo dove serve
GSAP e ScrollTrigger pesano insieme un centinaio di KB. Caricarli su ogni pagina, comprese quelle senza una sola animazione, sarebbe uno spreco.
Gli asset di frontend vengono accodati solo sulle pagine singolari dove has_block trova almeno un blocco del plugin. Una pagina di testo puro non scarica nulla; quella che usa un reveal scarica GSAP, ScrollTrigger e il runtime, e niente di più.
In più animo solo proprietà compositate, transform e opacity: niente animazioni su top, left, width o height, che costringono il browser a ricalcolare il layout. È questo che mantiene gli effetti fluidi su mobile.
I blocchi e gli effetti
- Reveal: i contenuti entrano con direzione, durata ed easing configurabili, anche con flip 3D o in sequenza legata allo scroll.
- Parallax: il blocco scorre in verticale a velocità diversa dallo scroll, per dare profondità.
- Zoom: la scala segue lo scroll in modo continuo, efficace sulle immagini hero.
- Card stacking: le card si impilano una sull’altra salendo dal basso, mentre la sezione resta bloccata.
- Stacking orizzontale: come il card stacking, ma le card entrano da destra.
- Flip 3D impilato: le card restano centrate e ruotano sull’asse verticale, impilandosi una dopo l’altra.
- Scroll orizzontale: una sezione i cui pannelli scorrono di lato mentre si scrolla in verticale.
- Counter: un numero che sale fino a un valore, una volta sola o legato allo scroll.
- Marquee: una riga di contenuti che scorre in loop, in autonomia o guidata dallo scroll.
- Scroll video: un video che avanza dal primo all’ultimo fotogramma seguendo lo scroll, pinnato a tutto schermo.
- Crawl 3D: testo in prospettiva che risale verso il punto di fuga, lo stile della sigla di Guerre Stellari.
Per maggiori informazioni contattami a info@davidemugnaini.it.