Cose mai viste

GSAP? Gasp!

di

thumbnail

14

giu

2016

GSAP è uno standard per le animazioni sul web, sino a venti volte più veloce di quel che veniva prima. Aprite gli occhi.

C’era una volta, in un web lontano lontano, la tecnologia Flash di Adobe, e chi voleva pubblicare in rete una animazione prendeva quella strada nella certezza che alternative praticamente non ce n’erano.

Nel 2010 il compianto Steve Jobs piantò un paletto di frassino nel cuore di Flash, proprio quando i browser di nuova generazione prendevano piede. Al web designer si aprivano due strade: disegnare un elemento e poi scrivere un programma in JavaScript per animarlo; oppure usare le transizioni CSS. Se vi prendete cinque minuti per guardare le due dimostrazioni vecchiotte i cui link ho appena usato noterete che i risultati sono piuttosto simili. Col tempo, naturalmente, i web designer più bravi sono riusciti a fare anche cose più spettacolari, pur sempre partendo dalle stesse funzionalità di base.

Per anni ci siamo detti che le animazioni JavaScript sono più lente e quelle CSS più veloci, che le prime richiedono un programmatore e le seconde un grafico, che le prime sono più flessibili e le seconde più semplici da creare. Queste affermazioni avevano un fondo di verità all’inizio, molto meno adesso, perché è salito il livello medio dei professionisti nel campo e per via del progresso generale: oggi JavaScript è molto veloce e le animazioni CSS sfruttano la scheda grafica del PC.

I più pigri hanno montato video sullo sfondo delle pagine web, i più bravi hanno imparato a mettere foto e sopra alle foto effetti speciali realizzati con una delle due tecniche citate, che le trasformano in video per solo un millesimo del peso. Se avete un minuto, guardate la demo dell’effetto aria calda sviluppato dal designer Lucas Bebber.

Quelli veramente bravi hanno sviluppato librerie JavaScript utilizzabili da tutti, come GSAP, che vedete dimostrata qui sotto. Fate clic sul pulsante toggle mouse controls per prendere il controllo del castello col mouse.

Visitate Howl’s Moving Castle di Nathan Gordon su CodePen per vedere il codice sorgente.

E se non sapete proprio programmare, neppure una sola riga? Consolatevi guardando il cartone animato, è splendido.




Luca Accomazzi (@misterakko) ha messo le mani su un calcolatore (Apple) nel 1980 e da allora non le ha quasi mai staccate anche se, avendo una moglie e una figlia, viene da sospettare che qualche pur breve pausa l’abbia trovata. Su Internet dal 1992, si dedica a tempo pieno a scrivere siti – circa trecento da fine 1997 – fermandosi solo per scrivere libri per Apogeo (spesso in sodalizio con Lucio Bragagnolo). L’azienda che ha fondato, Accomazzi.net, è specializzata in commercio elettronico e newsletter.

In Rete: www.accomazzi.net

Letto 2.397 volte | Tag: , , , , , ,

Lascia il tuo commento