animaciones con javascript

en Desarrollo Web, Javascript, Programación

Animaciones con Javascript: Tweens con GreenSock (GSAP)

Hola a todos, estoy intentando no descuidar el blog, manteniendo mis actividades lo más organizadas posibles. Siguiendo la pauta que marqué con la entrada anterior intentaré que esta entrada sea lo más explicativa posible. Y bien, para no dar tantas vueltas sin sentido, en esta ocasión aprenderemos a crear animaciones con Javascript, para ello utilizaremos la librería GreenSock (GSAP).

animaciones con javascriptSeguro que en alguna página lo has visto en acción, o hayas escuchado sobre esta librería y ahora quieras meterte de lleno y comenzar a aprender su funcionamiento desde cero, ¿cierto? Si es tu caso, e incluso si no, deberías continuar leyendo, tal vez llegue a interesarte al final. 😉

¿Qué aprenderás con esta entrada?

  • Que es GreenSock (GSAP)
  • Conocer que son TweenLite, TimelineLite, TimelineMax, TweenMax y para qué nos pueden ser útiles.
  • Crear animaciones sencillas utilizando TweenLite.
  • Utilizar los métodos .to(), .from() y .fromTo().

¿Qué y por qué GreenSock?

Debes saber que no estoy aquí para convencerte de que GSAP es actualmente la mejor opción para crear modernas, interactivas y elegantes animaciones web. Afortunadamente estás aquí para aprender, y es precisamente lo que haremos.

GreenSock es una poderosa plataforma de animación, que nos permite animar casi cualquier propiedad de los elementos del DOM, valores CSSobjetos canvas y más.

Está compuesta por 4 herramientas (APIS):

  • TweenLite: el núcleo de GSAP. Anima cualquier propiedad con valor númerico, por ejemplo, width y height. Si lo combinamos con el CSSPlugin, podemos animar cualquier propiedad CSS, por ejemplo, fontSize o backgroundColor. Es muy útil para animaciones de uno o muy pocos elementos.
  • TimelineLite: el contenedor para múltiples interpolaciones o líneas de tiempo. Cosas como pausar, reversa, añadir etiquetas y más. Su utilidad radica cuando animaremos secuencias de múltiples interpolaciones.
  • TimelineMax: funcionalmente similar a TimelineLite pero con agregados como yoyo, las “callback functions” personalizadas y más. Es genial para secuencias avanzadas de múltiples interpolaciones y líneas de tiempo.
  • TweenMax: incluye todo lo anterior más agregados, así como muchos plugins populares. En sus propias palabras, TweenMax es la herramienta de animación para web más poderosa.

Puedes leer más sobre cada una de estas herramientas, directamente en el sitio web de GreenSock. Para efectos prácticos nos enfocaremos únicamente en el API  TweenLite.

Hora de las animaciones con Javascript

Necesitamos escribir un poco de código antes de comenzar, el cuál será nuestro punto de partida en esta entrada. Ya que busco que esta sea una breve entrada, voy a mostrar el código importante, recuerda que puedes encontrar el ejemplo completo al final del post. Teniendo un archivo html común y corriente, debemos añadir lo siguiente:


<!-- Código HTML -->

...

<div id="box">
  <div class="boxSmall"></div>
  <div class="boxSmall boxTiny"></div>
</div>

...

Algunos estilos:


html, body {
  height: 100%;
}
body {
  background-color: #262626;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
}
#box {
  background-color: #ce5802;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.boxSmall {
  position: absolute;
  background-color: #cbc938;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 75px;
  z-index: 2;
}

.boxTiny {
  background-color: #147a7a;
  height: 50px;
  bottom: 0;
  right: 0;
  left: auto;
  z-index: 3;
}

Y no podemos olvidar hacer referencia a los scripts de GreenSock en nuestro HTML:


...

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenLite.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/CSSPlugin.min.js"></script>

...

A simple vista podemos notar que es un archivo HTML básico, un poco de estilos para hacer llamativo nuestro ejemplo, y antes de cerrar nuestra etiqueta body, enlazamos los archivos de GSAP desde sus CDN. Estos archivos son TweenLite.min.js y CSSPlugin.min.js. Si visualizamos este código, debería verse de la siguiente manera:

animaciones con javascriptUna caja en el medio de la página con dos rectángulos pequeños dentro de ella.

TweenLite

TweenLite puede animar una o múltiples  propiedades de uno o múltiples objetos (array de elementos). Lo primero que necesitamos es referenciar este elemento (o elementos) a una variable, para que nos sea más sencillo manipularlo en nuestro código. Podemos realizar esto utilizando un ID, o mediante alguna clase, para nuestro ejemplo haremos referencia a nuestro elementos box.


// Hacemos referencia al elemento.

let $box = document.getElementById("box")

Esto nos permite reutilizar la variable para aplicar diferentes animaciones al elemento sin impactar el rendimiento, a diferencia del caso en el que se necesitara crear una nueva referencia al elemento en cada ocasión.

Creando nuestro primera interpolación: .to()

Digamos que la animación que tenemos en mente, es simplemente mover nuestra caja hacia el lado izquierdo del navegador, para esto, debemos utilizar el siguiente código.


// TweenLite.to(elemento, duración,{propiedades CSS que buscamos animar})

TweenLite.to($box, .7, { left: 0})

Si todo está correcto, al ejecutar el código el resultado debería ser como la siguiente imagen:

animaciones con javascriptY la animación se realizó en el tiempo de duración que especificamos (0.7 segundos). ¿Nada mal cierto? 🙂

La anterior animación se llevó a cabo desde la posición definida en los estilos para nuestro elemento (left: 50%) hasta la posición definida en el tween .to() (left: 0). Si son perfeccionistas, puede que el resultado no sea de su agrada, ya que únicamente es visible la mitad de nuestra caja, esto se debe a que en nuestros estilos hemos definido que nuestra $box tenga la siguiente regla:

transform: translate(-50%, -50%)

Sin embargo, podemos arreglarlo añadiendo otro valor al método to(), así que debemos animar también el valor de x para nuestra $box, por lo que debería quedar de la siguiente manera si queremos visualizar completamente nuestra caja:

TweenLite.to($box, .7, { left: 0, x: 0 })

Recuerda que puedes animar tantas propiedades CSS como desees, tan sólo debes separarlas por una coma(,).

Creando una interpolación .from()

Otro tipo de animaciones con javascript que podemos realizar es utilizando el método .from().

Si comentamos el método anterior, y ejecutamos lo siguiente:

TweenLite.from($box, 2, {x: "-=500px", autoAlpha: 0})

Podrás notar que ahora estamos haciendo lo contrario, ya que la animación se realiza desde el valor definido en el método .from() al valor definido en nuestros estilos. También puede que hayas notado que utilizamos valores relativos (-=, +=), pero de ellos hablaremos más adelante.

Otra cosa que puedes haber notado es autoAlpha, esta es una propiedad especial que GSAP proporciona, la cual combina opacity y visibility en una. Al momento de aplicar autoAlpha, los estilos que son aplicados a nuestro elemento son

opacity: 0; visibility: hidden;

.

Una vez que la interpolación finaliza, visibility es colocado como inherit, y opacity se anima al valor 1. Adicionalmente, no es necesario que coloquemos:

opacity: 0;

en nuestros estilos, ya que GSAP asume que opacity debería ser 0 cuando le colocamos:

visibility: hidden;

Creando interpolación con .set()

En ocasiones, lo único que necesitamos es colocar una propiedad a un elemento sin algún tipo animación, por ejemplo, resetear una posición. En estos casos es donde el método .set() nos puede ser útil.

Comentamos los métodos anteriores y ejecutamos lo siguiente:


TweenLite.set($box, {x: "-=500px", scale: 0.3})
TweenLite.set($box, {x: "+=100px", scale: 0.6, delay: 1})
TweenLite.set($box, {x: "-50%", scale: 1, delay: 2})

Al ejecutarlo, observamos como nuestro elemento $box va modificando su posición en x sin ninguna animación, además de irse escalando.

También incluimos delay en el segundo y tercer llamado al método, para lograr que la ejecución sea en secuencia. Sin esto, todos se ejutarían simultáneamente.

Valores Relativos vs Valores Absolutos

Para la propiedad x de los primeros dos llamados al método .set() estamos usando valores relativos.

El primero toma 500px menos de la posición por defecto de nuestro elemento, a este valor añadimos 100px para obtener una nueva posición en x de nuestro elemento, y para nuestro último llamado, definimos un valor absoluto del 50%, el cual es igual al definido en nuestros CSS.

Creando una interpolación con .fromTo()

El último método para crear interpolaciones ofrecido por GreenSock es .fromTo().

Como el nombre nos sugiere, definimos una posición inicial, y una final para realizar la interpolación. Por ejemplo:

TweenLite.fromTo($box, 1, {x: "-=500px", autoAlpha: 0}, {x: 50, autoAlpha: 1})

En lugar de tener sólo un conjunto de valores, tenemos que definir los valores desde (from) y hasta (to).

De nuevo, comenzamos desde 500px a la izquierda de la posición definida originalmente en los estilos.

El valor {x: 50} sobreescribe la posición original de CSS transform: translate(50%, 50%), y coloca el nuevo valor: transform: matrix(1, 0, 0, 1, 50, -50).

Para entender mejor la manera en la cual GreenSock calcula y sobreescribe los valores transform por defecto, puedes mirar el siguiente vídeo:

Y bueno, por esta ocasión es todo, es más algo cultural que otra cosa pero espero te haya parecido interesante. Puedes encontrar el ejemplo completo en el siguiente jsfiddle.

Espero la explicación haya sido clara y cualquier comentario no dudes en dejarlo aquí abajo, o con confianza mencionalo por Twitter o en la Fanpage de Facebook, y aprovecho a invitarte para que me sigas en las redes y compartas el contenido del blog, con lo cual me harías un gran favor.

Saludos y nos vemos la próxima.

Deja un comentario