Spirit ha reso l’animazione delle SVG nel web una passeggiata

Le animazioni permettono di aumentare la UX generale di un sito — grazie a Spirit, animare SVG senza toccare il codice è diventato uno spasso.

Un sito web con elementi animati può avere un impatto sugli utenti e sulla UX generale maggiori rispetto a un sito statico (se le animazioni sono usate con un fine specifico e nell’adeguato contesto).

Lo si può notare solo dai siti qua sotto:

We develop for patients - Debiopharm Group - Clinical trials

Wibicom Agency - Brussels, Belgium

Meditation and Mindfulness Made Simple - Headspace

Spesso, creare animazioni per web comportava un grande sforzo e un workflow disorganizzato con numerosi step e passaggi che non conducevano spesso al risultato sperato.

Il 2017 ci ha donato Spirit 👻

https://github.com/spirit/spirit

Cos’è

Spirit è un sistema che permette di animare gli oggetti presenti in un sito web (SVG, div, icone, ecc) ed è composto da due elementi:

• l’editor dell’animazione, che è un’applicazione desktop
• lo script javascript che serve a implementare le animazioni nel codice del sito.

A destra l’editor e a sinistra gli script del runtime che viene installato: https://docs.spiritapp.io/gsap_runtime_include.html

Come funziona

Settare l’ambiente

Spirit è comodo perchè permette di operare direttamente sugli oggetti del sito e visualizzare gli effetti direttamente da browser.

Per ora, è supportato solo Chrome e per fare queste magie serve installare il loro plugin.

Fatto?

Una volta installato, dovete aver aperto il vostro sito in una pagina di Chrome: potete implementare le animazioni anche se non avete i file nella vostra macchina. Il plugin inietterà uno script nella pagina web che vi permetterà di selezionare gli oggetti che volete animare.

Selezionare

Gli oggetti selezionati formano i gruppi che poi verranno esportati come file JSON.

La schermata di seleziona di elementi

Elemento selezionato

Possono essere selezionati e animati tutti gli elementi presenti: SVG in primis, ma anche icone, div contententi testo — tutto ciò che viene definito nel codice del sito.

Animare

Finalmente si può giocare: se avete mai usato una timeline con i keyframes, allora non c’è nulla di nuovo.

Spirit permette di modificare un gran numero di variabili e sottovariabili al loro interno e la timeline è molto intuitiva. Inoltre, ci sono avanzate funzioni di easing e di modifica della curva di velocità dell’animazione.

Aggiunti i keyframes di interesse, il pulsante Play permette di visualizzare l’animazione direttamente nella pagina del browser, testando subito i suoi effetti a diverse risoluzioni (responsive incluso).

Implementare

Spesso una fase dolorosa per i designer, Spirit rende il processo incredibilmente efficiente: l’animazione, grazie al fatto che viene esportato in un file JSON , può essere inserita direttamente nel repository del sito e il runtime di Spirit, una volta aggiunto, si occuperà di caricarla e avviarla.

Patrick Brouwer, il papà di Spirit, ha creato una documentazione ancora più specifica dove spiega, passo per passo, il funzionamento di questo tool con una parte molto approfondita sul runtime.

Introduction · Spirit

Ho avuto modo di testare Spirit su alcuni miei progetti e sia io che i miei amici developer siamo rimasti davvero colpiti da questo piccolo fantasmino.

Ma davvero. Un sacco.

Le potenzialità sono elevate soprattutto per una progettazione di animazioni costum più rapida e meno painful sia per i designer che per i dev.