Librerie di animazione JavaScript: 10 scelte popolari

Mi piace sperimentare vari effetti di animazione, in particolare quelli semplici e che possono essere implementati con CSS. Ma, se guardiamo al quadro più ampio, le animazioni CSS ti porteranno solo così lontano. E, se vuoi creare esperienze utente complesse e interattive, prima o poi dovrai passare a JavaScript.

Il vantaggio principale dell'utilizzo di JavaScript per gli effetti di animazione è che puoi controllare molto di più della logica di animazione. Ciò include la fluidità delle transizioni, il controllo dello stato e della risposta del DOM, ma anche l'uso della grafica 2D e 3D grazie a WebGL.

I tipi di librerie di animazioni JavaScript

Quindi, poiché le librerie di animazioni JS sono disponibili in molte forme e forme, aiuta davvero a restringere l'area specifica di messa a fuoco. Molti motori e framework non vengono utilizzati solo per il front-end, ma anche per creare giochi e altri contenuti interattivi.

Per questo riepilogo specifico, il mio focus è sulle librerie che sono più comunemente utilizzate nello sviluppo front-end, da sole o insieme a uno qualsiasi dei framework attuali.

A tempo debito, prenderò in considerazione l'aggiunta di più librerie a questo elenco che sono di dimensioni inferiori ma forniscono comunque modi significativi per aggiungere animazioni interattive ai tuoi progetti.

Ogni libreria ha collegamenti al proprio sito Web e alla pagina GitHub. Ho anche aggiunto un esempio CodePen che puoi eseguire da questa pagina e risorse aggiuntive, che sono tutorial o guide video.

#1 – Tre.js

Three.js è la libreria di riferimento per la creazione di effetti animati 3D che utilizzi nello sviluppo di siti Web creativi. Three.js elimina la necessità per gli sviluppatori di conoscere WebGL e può invece concentrarsi sulla creazione di effetti 3D interattivi senza la complessità.

Nella fascia alta, Three.js viene utilizzato per creare esperienze virtuali interattive, come Mozilla Hub. Inoltre, la libreria viene spesso utilizzata anche per creare esperienze di landing page coinvolgenti. Editori ed editoriali di livello mondiale utilizzano Three.js da anni per creare pagine basate sui dati con aggiornamenti dinamici.

Se visiti la home page, c'è un numero enorme di progetti in evidenza elencati, che dovrebbero darti molta ispirazione/chiarimento su come questa libreria viene utilizzata negli ambienti di tutti i giorni.

Animazione di esempio Three.js

Guarda lo sfondo Pen Mesh Line Waves – THREE.js di CP Designer (@cpandya) su CodePen.

Risorse aggiuntive di Three.js

• Come abbiamo costruito il globo GitHub
• Effetto distorsione pixel con Three.js

#2 – Anime.js

Anime.js di Julian Garnier è probabilmente la seconda libreria più conosciuta per l'integrazione di animazioni in progetti basati sul web. La sua popolarità deriva dall'avere strumenti integrati per accelerare il processo di animazione di elementi CSS, SVG e DOM.

Ad esempio, puoi scegliere come target selettori CSS specifici e quindi applicare una logica di animazione raffinata tramite JavaScript, invece di scrivere tu stesso i @keyframes .

 anime({ targets: '.staggering-axis-grid-demo .el', translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}), translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}), rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}), delay: anime.stagger(200, {grid: [14, 5], from: 'center'}), easing: 'easeInOutQuad' });

Solo con lo snippet di cui sopra da solo, puoi creare un effetto simile a questo:

Se dovessi farlo con CSS, dovresti selezionare ogni singolo blocco della griglia e scrivere una logica separata per esso. Non solo è impraticabile, ma richiede anche molto lavoro. Nella pagina dei documenti di Anime.js troverai molti esempi simili. E la demo di seguito fa un ulteriore passo avanti per mostrare come questa libreria può essere utilizzata nello sviluppo front-end moderno.

Animazione di esempio di Anime.js

Guarda l'animazione del logo Pen anime.js di Julian Garnier (@juliangarnier) su CodePen.

Risorse aggiuntive di Anime.js

• Tutorial Anime.js – Motore di animazione JavaScript in 10 minuti
• Animazione dell'interfaccia utente con Anime.js

#3 – Popmotion

Popmotion è una libreria di animazioni di basso livello scritta in TypeScript. È anche la libreria che alimenta la popolare libreria Framer Motion (l'abbiamo elencata in questo articolo) utilizzata nei progetti React. Essendo imparziale, puoi utilizzare Popmotion per integrare effetti personalizzati scrivendo funzioni aggiuntive che desideri utilizzare.

Come suggerisce il nome, Popmotion è particolarmente adatto per animare elementi dell'interfaccia utente attraverso l'uso di varie animazioni basate sul movimento. Ciò include effetti come andamento, molle, fotogrammi chiave ed effetti di transizione più complessi. L'esempio seguente fa un buon lavoro nel mostrare l'applicazione pratica degli effetti di animazione per gli elementi dei componenti.

Animazione di esempio di Popmotion

Guarda la demo di Pen Popmotion di Arden (@aderaaij) su CodePen.

Risorse aggiuntive di Popmotion

• Visualizza l'algoritmo dei pancake con React e Popmotion.io
• Aggiungi animazioni primaverili alla tua app angolare con popmotion

#4 – Mo.js

Mo.js è focalizzato sulla grafica animata ed eccelle nel fornire una struttura di codice semplice che puoi implementare in progetti autonomi, ma anche insieme a framework come React.

E, poiché Mo.js viene fornito con la propria API dichiarativa, puoi controllare ogni passaggio dell'animazione. Ciò include la definizione non solo della logica di ciò che desideri ottenere, ma anche di come ci arriverai. La libreria include componenti ed esempi predefiniti che sono personalizzati per esperienze utente visivamente ricche.

Ecco uno snippet di esempio:

 const travelCircleExpand = new mojs.Shape({ fill: COLORS.BLACK, radius: 126, scale: { .1: 1 }, opacity: { 0 : 1 }, easing: 'cubic.out', duration: 400, isForce3d: true, isTimelineLess: true, });

Come puoi vedere, gran parte della logica è predefinita. Quindi, invece di dover elaborare le tue idee, puoi prendere nota delle proprietà fornite e costruire la tua strada. La sezione tutorial nei documenti contiene alcuni esempi di applicazioni pratiche, in particolare effetti che aggiungono animazioni minuscole ma significative agli elementi delle pagine Web di tutti i giorni.

mo.js Esempio di animazione

Guarda gli effetti Pen Link Hover con mo.js di Mike Quinn (@mprquinn) su CodePen.

mo.js Risorse aggiuntive

• Come usare MoJS con React
• Fare i conti con MoJS

#5 – p5.js

p5.js è l'implementazione JavaScript di Processing, un "linguaggio" separato destinato all'uso da parte degli artisti visivi. A differenza di alcuni degli esempi visti finora, p5.js è una libreria di animazione universale, che fornisce soluzioni non solo per applicazioni pratiche ma anche per progetti più robusti e complessi. Ciò include il supporto completo per effetti 2D e 2D.

Per quanto riguarda l'utilizzo di p5.js nei progetti di siti Web, la libreria apre una strada per una creatività approfondita. Ad esempio, puoi avviare rapidamente effetti come una cortina fumogena, alberi animati e pagine di destinazione basate sui dati con cui gli utenti possono interagire.

Devi fare tutti i disegni da solo, ma con il numero di risorse disponibili per p5.js, penso che scoprirai che non è così difficile iniziare. E, ovviamente, la comunità dietro a entrambi questi progetti è molto coinvolta.

p5.js Esempio di animazione

Vedere la penna P5.JS Twist and Turn. di Sdsmnc (@supastrocat) su CodePen.

p5.js Risorse aggiuntive

• Elaborazione e p5.js
• Tramonti e stelle cadenti in p5.js

#6 – Movimento

React è così popolare che ha senso solo avere una propria libreria di animazioni. Framer Motion viene fornito con un'API predefinita che consente agli sviluppatori React di semplificare il processo di creazione di componenti animati, ma allevia anche alcuni degli ostacoli legati alla necessità di apprendere CSS e le sue proprietà di animazione indipendenti. Ed è abbastanza facile lavorarci.

Un frammento di esempio:

 import { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} /> )

Le animazioni in Framer sono definite dalle proprietà di motion e animate . Ciò ti consente di selezionare interi componenti e i loro elementi interni, che puoi poi arricchire con la tua logica di animazione personalizzata. L'articolo Smashing di Nefe Emadamerho-Atori nella sezione delle risorse è un ottimo punto di partenza per vedere come funziona Framer Motion.

Animazione di esempio di movimento

Guarda il pulsante Pen Laser Sight di codebro (@codebro) su CodePen.

Risorse aggiuntive per il movimento

• Presentazione di Framer Motion
• Animazioni reattive con Framer Motion

#7 – GSAP

Recentemente ho visto l'arte di GSAP condivisa su Twitter abbastanza spesso. Ma non è una sorpresa. Molte delle animazioni e degli effetti dinamici che vediamo nei progetti creativi sono stati resi possibili grazie al robusto motore GSAP.

Non solo la libreria è ottimizzata per le prestazioni, ma è anche altamente compatibile con le tue tecnologie preferite. Ciò include framework come React & Vue, ma anche librerie come jQuery, con supporto aggiuntivo per browser Web mobili e datati .

Poiché GSAP è in grado di interrogare e animare praticamente qualsiasi tipo di elemento web (da CSS a Canvas agli oggetti DOM), puoi usarlo per qualcosa di semplice come un effetto spinner, o fare di tutto e creare esperienze di siti Web veramente dinamiche.

La sezione Showcase contiene centinaia di progetti di esempio su cui gli sviluppatori hanno lavorato. Dai un'occhiata sia per l'ispirazione, ma anche per vedere cosa è possibile fare con questa libreria.

Animazione di esempio GSAP

Guarda la Pen Hulu Originals Intro di Hyperplexed (@Hyperplexed) su CodePen.

Risorse aggiuntive GSAP

• Incredibili tecniche di animazione con GSAP
• Creazione di sequenze di animazione di siti Web elaborate - Tutorial GSAP 3

#8 – Paper.js

Paper.js è una libreria di animazioni con una particolare attenzione all'animazione di grafica vettoriale. Questo approccio ti consente non solo di effetti statici, ma anche di esperienze dinamiche interattive. In particolare, Paper.js è popolare tra i progetti di animazione in cui l'utente può trascinare oggetti, riordinarli e fornire input personalizzati.

Gli oggetti possono essere classificati attraverso livelli, con ogni livello che ha una specifica di animazione personalizzata. Questo è utile quando lavori su strutture complesse, permettendoti di rimuovere/disabilitare determinati livelli a meno che non sia richiesto dall'utente.

Animazione di esempio di Paper.js

Guarda i Pen Filling Glasses – Paper.js di Fiorald Ismaili (@Fiorald) su CodePen.

Risorse aggiuntive di Paper.js

• Cancella vettore Paper.js
• Onde in Paper.js

#9 – Animazioni Web

Questa libreria è una porta JavaScript diretta dell'API di animazione Web. La libreria si integra direttamente con la specifica Element.animate() , consentendo di utilizzare le funzionalità di animazione tipicamente scritte utilizzando la logica CSS. Gli autori lo hanno spiegato dicendo:

"Un'implementazione JavaScript dell'API Web Animations che fornisce funzionalità di Web Animation nei browser che non la supportano in modo nativo. Il polyfill ritorna all'implementazione nativa quando ne è disponibile una."

Animazioni Web Esempio di animazione

Guarda le animazioni di Pen Imperative di Sam Thorogood (@samthor) su CodePen.

Animazioni Web Risorse aggiuntive

• API Animazioni Web – API Web | MDN
• Animazioni Web Livello 2 | W3C

#10 – Protone

Gli effetti particellari sono decisamente in cima alle moderne tendenze del web design. Non solo i designer li implementano per effetti di sfondo, ma anche per transizioni interessanti e persino presentazioni per progetti creativi. La libreria Proton è adattata specificamente alle esigenze di ridimensionamento rapido degli effetti particellari creativi.

Puoi fare cose come creare effetti scintilla e interazioni basate sulle collisioni, ma anche trasformare il testo in nuove ed entusiasmanti esperienze di animazione.

Animazione di esempio di protoni

Guarda la penna my-emitter di matsu7089 (@matsu7089) su CodePen.

Risorse aggiuntive per i protoni

• Esempi di motori protonici
• Componente Reagire per sfondi di particelle

Riepilogo

La cosa bella di molte di queste librerie è che esistono da un po'. In quanto tale, è relativamente facile trovare esempi ma anche guide approfondite su come utilizzare una particolare libreria in un contesto specifico.

Soprattutto, aiuta a sapere che tipo di obiettivo stai cercando di raggiungere, in particolare se lavorerai su animazioni che implementano dati in tempo reale o input basati sull'utente.

In altre parole, non esiste la cosa migliore . Ogni libreria ha i suoi punti di forza e di debolezza. Per me, probabilmente andrei con GSAP perché è ben ottimizzato per l'uso in quasi tutti i progetti di front-end immaginabili.

Ma se sto facendo un progetto meno ambizioso, una libreria come Popmotion è sufficiente.