GreenSock Animation Platform (GSAP) v12, JavaScript version

JavaScript GreenSock Animation Platform (GSAP)

Desde hace ya bastante tiempo, el mundo de los estándares web está recibiendo magníficas aportaciones de muchos desarrolladores para simplificar y potenciar el uso de algunas de las características más interesantes de estas tecnologías.

Cada día son más los motores de físicas que se están portando a JavaScript, frameworks y herramientas de animación, para permitir subir un nivel más la interacción, animación y principalmente el desarrollo de juegos con estándares. En mi opinión, Flash sigue bastante por delante si se analiza el estado actual de ambos referentes en el campo de los videojuegos, pero quien va a decir que no le gustan algunos dulces que nos están llegando como CreateJS, Adobe Edge, o multitud ya de Game Engines.

En este post os presento los pasos básicos de uso de una herramienta que es un referente en el mundo “flashero” y que abraza a JavaScript con una versión para trabajar de la misma forma en dicho lenguaje. Si el día en el que descubrí las bondades de TweenLite (y posteriormente su hermano mayor TweenMax) fue grande, el día en el que GreenSock ha decidido sacar una versión para JavaScript seguramente será igual o más grande aun.

Es pronto (para mi) para opinar a fondo de esta versión, pero de antemano ya hay cosas muy interesantes:

  • Conserva totalmente la sintaxis de la que disponía en flash (por lo tanto para quien venga de ese mundo, curva de aprendizaje casi nula).
  • Soporta plugins para extender las funcionalidades “básicas” de TweenLite y según cada proyecto, poder elegir cuáles incluir.
  • Soporta la versión de TweenMax, para cuando necesitamos toda su potencia con todo incluido.
  • Dispone de las versiones “Timeline” que permiten el trabajo avanzado con secuencias de animaciones, lo cual simplifica mucho hacer animaciones complejas.
  • Permite almacenar la referencia a la animación a una secuencia, para poder trabajar con ella desde diferentes puntos del código.
  • Capacidad de asignar una función callback al completar la animación (también el paso de parámetros a la misma).
  • Capacidad de llamar una función en cada “paso” de la animación (mediante un listener).
  • Posibilidad de asignar múltiples elementos a una misma animación.

Si el rendimiento que aporte fuera equivalente al que dan en Flash (aquí tienes una prueba), no me cabe la menor duda que estamos ante un futuro referente de la animación con JavaScript.

Componentes básicos para su uso
Antes de comenzar a usar GSAP tenemos que tener claro qué uso le vamos a dar, para tomar la primera decisión: usar TweenLite, TweenMax, TimelineLite o TimelineMax. Dependiendo de nuestras necesidades una librería nos vendrá mejor que otra.

Además tenemos que saber si trabajaremos sobre propiedades básicas del DOM, o sobre propiedades CSS y si necesitaremos algunas características adicionales (como fórmulas de movimiento), para tener a mano los plugins y “easings” adicionales necesarios.

Por tanto para comenzar lo que necesitamos es incluir en nuestra página una de las librerías disponibles acompañada de los plugins que vayamos a usar, y las ecuaciones de movimiento adicionales. Con esos 3 componentes estaríamos listos, lo que se traduce en algo similar a esto:

Incluyendo los elementos básicos en nuestro HTML




Si usáramos TweenMax, no sería necesario incluir los elementos adicionales al estar incluidos en la propia librería (TweenMax.min.js)

Sintaxis
Una vez que tenemos configurado el sistema con todo lo necesario, nos centramos en conocer la sintaxis, que como os hemos adelantado es de aprendizaje directo para los que vengan de usarlas en Flash, ya que se mantiene al 100%.

Si hemos elegido TweenLite como librería, la sintaxis sería la siguiente:

TweenLite.to(elemento, duracion, {propiedad1: valor1, propiedad2: valor2, ..., ease:Tipo_Ecuacion_Easing});

Se podría guardar la referencia a la animación con este tipo de llamada, para poder acceder a ella y sus métodos posteriormente:

var miAnimacion = new TweenLite.to(elemento, duracion, {propiedad1: valor1, propiedad2: valor2, ..., ease:Tipo_Ecuacion_Easing});

El método “to” permite modificar las propiedades del elemento pasado como primer parámetro desde su valor actual hasta el indicado en un tiempo marcado por el parámetro “duracion”. Es decir algo como el código que se muestra a continuación, cambiaría el ancho y alto del elemento del DOM con id “logo”, a un valor de 180 y 300 respectivamente, y lo haría en un tiempo de 2 segundos, con una animación de velocidad basada en una fórmula elástica con “deceleración” (por el Out).

var miElemento = document.getElementById("logo");
TweenLite.to(miElemento, 2, {width: 180, alto: 300, ease:Elastic.easeOut});

Como consejo tras hacer mis primeros pinitos, os recomiendo siempre usar una propiedad denominada css para modificar cualquier propiedad del elemento, quedando la sintaxis algo como esto:

TweenLite.to(elemento, duracion, {css:{propiedad1: valor1, propiedad2: valor2, ...}, ease:Tipo_Ecuacion_Easing});

Importante ver que la propiedad css a su vez es un objeto de propiedades/valores. Si no se usa este formato, es posible que estilos aplicados desde una hoja de estilos interfieran en la animación.

Secuencias
Muchas veces no necesitamos realizar una animación sola, sino que tenemos que encadenar una secuencia de ellas con cierto control sobre el sincronismo entre los diferentes pasos de la animación. Para ello disponemos de TimelineLite y TimelineMax, que nos permiten lo que sus equivalente TweenLite y TweenMax, pero en formato de secuencia.

En la secuencia podemos añadir animaciones a un mismo elemento, o incluso a elementos diferentes, controlando el tiempo que transcurre entre cada paso, e incluso pudiendo emplear en los pasos llamadas a funciones adicionales. Es algo bastante más potente que una simple cola de animaciones, que suele ser lo que dan otras librerías similares. ¡Puedes controlar cada paso por separado, pero también la secuencia en su conjunto!

No se puede hacer más sencillo:

var secuencia = new TimelineLite();
secuencia.to(elementoA, 1, {css:{width:"100px"}, ease:Quint.easeOut});
secuencia.to(elementoB, 1, {css:{width:"200px"}});
secuencia.call(miFuncion); // incluimos una llamada a una función en la secuencia
secuencia.to(elementoA, 1, {css:{opacity:0.8}}, 1.5); // con un lapso de 1.5 segundos tras la anterior
secuencia.to(elementoA, 1, {css:{width:"200px"}, -1); // se solapa con la anterior al tener un lapso negativo

Creo que no hace falta decir mucho para disfrutar del arte de la animación compleja…

Estado actual de la beta
La verdad que en las pruebas no he tenido excesivos problemas, además del consejo que os he comentado sobre el uso de la propiedad css, he encontrado problemas al usar la propiedad transformOrigin sobre una animación (esta propiedad sirve para indicar el punto de referencia sobre la que se aplicará la transformación, lo cual es un tremendo WIN en elementos HTML), pero no puedo asegurar que sea un bug de un caso concreto, o directamente de la propiedad, lo que me sorprendería… tocan más pruebas.

Documentación y Demo
Pues tras esta introducción, sólo te queda darle caña a la documentación para descubrir todas las perlas que te puedes encontrar con TweenLite y TweenMax, y verlo en acción o bien en su propia web o en la demo que hemos preparado para probar la librería.

View Demo Source Code

En el estudio tenemos claro que vamos a sacarle partido, y esperamos sacar el mismo o más que todo lo que hemos podido disfrutar de las originales en Flash. En cuanto tengamos un proyecto real en el que las usemos os lo haremos saber. Si las usáis y tenéis tips o bugs detectados, se agradecen los comentarios!