Popmotion è una soluzione basata su JavaScript che si propone come una sorta di "coltellino svizzero" a disposizione dei creatori di animazioni e degli sviluppatori di applicazioni Web interattive. Parliamo di una motion library dalle dimensioni estremamente contenute, appena 11.5 Kb, facilmente installabile attraverso il package manager npm.
Disponibile sotto licenza Open Source, Popmotion può essere integrato nell'ambiente di lavoro del proprio progetto tramite la seguente istruzione:
npm install popmotion --saveIn alternativa è possibile fare ricorso a yarn:
yarn add popmotionoppure fare riferimento al playground di Popmotion su CodePen così come al download del file JavaScript minificato della libreria (popmotion.global.min.js) per l'inclusione da copia locale.
Animazione e interazioni sono generabili a partire da delle azioni, queste ultime vengono rappresentate a loro volta da stream di valori con cui parametrare i comportamenti degli oggetti animati e i loro movimenti. I valori utilizzati sono agnostici rispetto allo strumento di sviluppo di riferimento (ad esempio React), per cui è disponibile la compatibilità con qualsiasi API accetti un valore numerico come parametro di input.
L'approccio scelto dagli sviluppatori è quindi quello del "Learn once, animate anything", rendendo la curva di apprendimento non particolarmente ripida e le opportunità di adozione più numerose.
Pur trattandosi di una libreria poco intrusiva le opportunità di creare elaborati complessi sono diverse. Popmotion supporta ad esempio la schedulazione, consentendo di utilizzare un'azione per controllare l'output di un'altra, il merging di più azioni per la generazione di un unico output, il tracciamento degli eventi multitouch così come come le animazione multitraccia sequenziabili su timeline.
Giunto recentemente alla versione 8, Popmotion è stato recentemente dotato di un'API reattiva risultato di una reimplementazione in favore della programmazione funzionale.
Via Popmotion