[Web Design] Animazioni SVG

Le animazioni SVG sono un nuovo trend di web design che tutte le web agency dovrebbero tenere d’occhio, in quanto portano diversi vantaggi competivi.

Innanzi tutto grazie al’utilizzo di grafiche vettoriali non ci sono problemi di risoluzione e bassa qualità, in più anche il peso delle illustrazioni è molto ottimizzato e tramite l’utilizzo delle librerie che a breve andremo a vedere abbiamo la compatibilità su tutti i device.

Perchè utilizzare questo tipo di animazioni? Sicuramente per rendere più interattivo e accattivante il sito in più è possibile creare anche animazioni molto complesse e gestibili dinamicamente per avere un sito veramente innovativo.

Guardiamo un po’ di librerie che permettono di fare animazioni.

Vivus.js

Libreria veramente molto semplice da utilizzare, permette di animare dei path svg (path esportati direttamente da un programma come Illustrator oppure altri programmi di grafica vettoriale, oppure scritti a mano) e permette di animarli scegliendo il tipo di animazione, se i path devono partire tutti insieme, uno alla volta, con del ritardo ecc…

Snap.svg

Bella libreria made Adobe, a differenza di Vivus secondo me ha un time-to-learn più elevato ed è da valutare nel caso di dover scrivere direttamente da codice un animazione, con Vivus sicuramente è più semplice animare un SVG preparato tramite tool grafici appositi.

GreenSocks MorphSVG

Quando le animazioni SVG prendono tutta un altra strada ecco un fantastico plugin che permette di gestire cose molto complesse con risultati veramente strabilianti.

Conclusioni

Sicuramente dipende dal caso d’uso che ne dovete fare, per animazioni molto semplici da utilizzare all’interno delle pagine magari durante lo scrolling Vivus.js è la libreria che con il minimo effort vi aiuterà.

Per progetti o sezioni dove è necessario un elaborazione più evoluta MorphSVG di GreenSock a mio avviso sarà la libreria che vi darà più soddisfazioni.

Start typing and press Enter to search

bootstrap4 web agency web design