Ogni frontend developer sperimenta e seleziona diverse librerie a seconda delle necessità. Il segreto è nello scovare queste librerie e testarle perché a volte alcune librerie non funzionano perfettamente su tutti i dispositivi e browser, oppure vengono dismesse in favore di altre librerie, da gratis diventano in parte o in toto a pagamento, vanno in conflitto con altre librerie, con l’aggiornamento cambiano sintassi, insomma bisogna essere sempre sul pezzo!
Esistono tante tipologie di animazioni: in questo articolo approfondiremo le animazioni degli elementi all’interno della pagina web durante lo scroll.
Greensock
Hai presente tutti quei siti premiati su Awwwards? Vorresti creare un sito con tutte quelle fantastiche animazioni? Greensock è soluzione!
Si tratta di una libreria completa che permette di gestire tantissime tipologie di animazioni. La versione base è free, mentre alcuni plugin sono utilizzabili a pagamento.
Di seguito alcune animazioni che si possono gestire con totale controllo della timeline:
- SVG con controllo dello stato (play, stop, reverse, trigger events)
- animazioni di elementi basate sullo scroll di pagina
- elementi animati lungo un percorso definito
- applicazione di effetti agli elementi (effetti di colore, scala, ecc)
- morphing di forme
- animazione di testi
All’inizio ci si può perdere, ma la documentazione è fatta molto molto bene. Di recente è stata pubblicata la versione GSAP 3.4 con significativi miglioramenti di ScrollTrigger.
AOS – Animate On scroll library
Libreria free che permette di animare gli elementi in entrata in base alla loro posizione all’interno della pagina web, impostando durata, ease, delay, offset e punto di ancoraggio.
Di seguito le diverse tipologie di animazione:
- fade
- flip
- zoom
- slide
Non ha bisogno di settaggi particolari: è necessario utilizzare la sintassi indicata nella documentazione direttamente sull’elemento da animare (inline). A differenza di altre librerie, questa non permette di controllare lo stato dell’animazione: il trigger scatta quando l’elemento diventa visibile durante lo scroll di pagina.
Vivus js
Questa libreria permette di animare SVG con diverse animazioni:
- delayed: ogni tracciato dell’SVG viene animato con un piccolo delay inziale (default)
- sync: ogni tracciato viene animato in modo sincrono, cioè iniziano e finiscono tutti allo stesso tempo
- one by one: ogni tracciato viene animato uno dopo l’altro
Una volta creato l’oggetto Vivus è possibile controllare l’animazione tramite i metodi messi a disposizione: play, stop, reset, finish, setFrameProgress, getStatus e destroy.
Bisogna fare particolare attenzione a come viene generato l’SVG: non sono permesse forme e tutti gli elementi devono essere trasformati in tracciati <path> altrimenti non sarà possibile applicare l’animazione. Al tracciato è possibile impostare gli attributi fill e stroke per riempimenti e spessore della traccia.
jQuery DrawSVG
Come per la libreria precedente, DrawSVG permette di animare SVG purchè siano composti da tracciati.
Sono disponibili diversi metodi che permettono non solo di avviare l’animazione quando l’SVG diventa visibile in pagina, ma anche animarlo in modo sincronizzato allo scroll, animazione a seguito di una callback e animazione con una maschera.
Scroll reveal
ScrollReveal è una libreria che permette di animare gli elementi quando entrano/escono dalla viewport.
L’animazione può essere associata a qualsiasi elemento del DOM. Nella configurazione avanzata è possibile specificare un oggetto target come trigger dell’animazione e varie opzioni dell’animazione stessa (delay, ease, ecc).
L’animazione funziona anche all’inverso, quindi anche torna ad inizio pagina scrollando verso l’alto.
Pararoller js
Permette di applicare l’effetto di parallasse su singoli elementi. Gli attributi dell’animazione vanno applicati inline sui singoli elementi tramite gli appositi attributi data-* indicati nella documentazione oppure inizializzando l’elemento con la funzione pararoller().
Tramite gli attributi factor e transitions è possibile applicare il parallasse con diversi delay ed effetti, in modo differenziare le animazioni di oggetti vicini quindi enfatizzare l’effetto di parallax. Inoltre, è possibile ottenere una diversa velocità di parallasse a seconda della risoluzione dello schermo (utile soprattutto per controllare meglio l’animazione su schermi piccoli per non permetterebbero la corretta visualizzazione dell’elemento animato).
Attenzione in generale alle librerie di parallasse perchè non sono perfettamente compatibili con tutti browser (alcune generano uno sgradevole effetto glitch durante lo scroll).
Fullpage js
Interessante libreria che permette di gestire le sezioni di pagina come se fosse pagina a sè stanti, espandendo il tutto il fullscreen.
È sufficiente definire il contenitore delle sezioni come oggetto univoco e definire le ancore, cioè le sezioni interne. L’animazione può essere gestita in verticale o in orizzontale, con o senza elementi di navigazione (arrows e dots). Sono disponibili utilissimi metodi per controllare l’animazione e i punti di ancoraggio.
L’aspetto importante è che su diverse risoluzioni le sezioni si adattano in altezza.
Locomotive scroll
Questa libreria sorprende molto nella sua demo online.
Permette di gestire animazioni di grande impatto con:
- diverse velocità con effetto di parallasse
- diverse direzioni
- diversi delays
- elementi fissi nella viewport
Eventi e attributi possono essere applicati inline con data-* e sono disponibili diversi metodi per controllare l’animazione.
In generale quando si seleziona una libreria bisogna fare molta attenzione alla compatibilità con i vari browser e alla posizione degli elementi su varie risoluzioni, in quanto la visibilità potrebbe venir meno, infine non esagerare inserendo troppi effetti. Less is more!
TAGS:
howto - librerie - opensource - programmatori - siti - trend - webinterface