¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Introducción a GreenSock con TweenLite

Es posible que hayas visto estas cosas en acción en algún sitio, es posible que hayas leído algo sobre Greensock.

Sea como sea, en este tutorial vamos a ver lo básico sobre la plataforma de animaciones de Greensock (GSAP en Inglés) con los ojos de un auténtico novato.

He usado mucho Greensock en proyectos recientes y lo cierto es que resulta muy vistoso y práctico por lo que si esto te interesa, ¡sigue leyendo!

¿Qué es Greensock?

GreenSock es una plataforma para crear animaciones que te permite animar casi cualquier propiedad de un elemento del DOM, un valor CSS, objetos de un canvas y mucho más.

Tiene cuatro herramientas. Vamos a ver sus diferencias.

  • TweenLite: Es el núcleo de GSAP y nos permite animar cualquier valor en un objeto. No obstante, lo más común es usarlo con CSSPlugin lo cual nos permite animar cualquier propiedad CSS de un elemento del DOM como width, height u opacity. TweenLite es tu aliado para animaciones sencillas en uno o varios elementos.
  • TweenMax: Es el hermano mayor de TweenLite. Le añade muchas características útiles (aunque no esenciales) como repeat(), yoyo() además de contener los plugins más usados como CSSPlugin.
  • TimelineLite: TimelineLite es un contenedor de Tweens y/o de otras Timelines. Básicamente nos permite crear composiciones de animaciones y nos permite métodos como pause(), reverse(), restart(), etc.
  • TimelineMax: Al igual que TweenMax, TimelineMax es el hermano mayor de TimelineLite y añade muchas funciones a TimelineLite del mismo calibre a las que recibe TweenLite con TweenMax.

Hoy vamos a aprender lo básico de TweenLite. Aunque los ejemplos que vamos a ver no son de usos muy prácticos, en próximos artículos veremos un uso bastante práctico de la librería.

Descarga la librería

Uses el sistema que uses para incluir librerías en tu proyecto, este es el momento de hacerlo. Si no usas sistema alguno (bower, npm, etc) ve a la página de GreenSock, dale al botón que dice Download GSAP, usa la opción Customize y copia y pega los dos enlaces (TweenLite.min.js y CSSPlugin.min.js) en tu archivo HTML.

Eres libre de marcar tantas casillas como quieras tal y como ves en la captura, pero a efectos de los ejemplos que vamos a ver hoy en este artículo, ¡no necesitarás ninguna más!

Comenzando con TweenLite

Vamos a preparar el terreno. Vamos a ver el código básico que vamos a usar en todas las páginas. Primero el HTML:

<div class="caja">  
  10
</div>  

Por supuesto esto dentro de su etiqueta body y todo lo demás. Básicamente es una sencilla caja con el número 10 dentro.

Veamos los estilos:

body, html {  
  height: 100%;
}

body {  
  background-color: #6B6973; 
  font-family: Arial, sans-serif;;
}

body,  
.caja {
  display: flex;
  align-items: center;
  justify-content: center;
}

.caja {
  background-color: #D9E0D9;
  border-radius: 5px;
  font-size: 40px;
  height: 150px;
  width: 150px;  
}

Nada fuera de lo común excepto flexbox, el cual usamos para ayudarnos. Algún día escribiré sobre él. ¡Espero!

Veamos cómo podemos hacer una sencilla cuenta atrás con TweenLite.

let caja = document.querySelector('.caja');  
let temporizador = {  
  cuenta: 10
};

let actualizar = function() {  
  caja.innerHTML = parseInt(temporizador.cuenta, 10);
};

let tween = TweenLite.to(  
  temporizador,
  10, 
  {
    cuenta: 0, 
    onUpdate: actualizar
  }
);

Lo primero que hacemos es hacernos con una referencia a nuestra .caja para poder modificar el contenido de la misma. Además, creamos el temporizador que no es más que un objeto.

Definimos la función actualizar que básicamente establece el HTML de .caja al valor que tenga temporizador.cuenta.

Finalmente definimos nuestro tween. El primer parámetro es el objeto que va a cambiar, en este caso el temporizador. El segundo parámetro es la duración (en segundos) que debe tardar en actualizar, en este caso 10. Finalmente tenemos un objeto de configuración, en este caso indicamos que queremos que cambie la cuenta a 0 y que cada vez que el valor cambie, se llame a la función actualizar.

Como ves, los parámetros que recibe la función, son bastante sencillos. Ahora veamos el resultado:

Ver demo Cuenta atrás en CodePen.

¡Fácil! ¿No?

No obstante esto no es para lo que vamos a usar TweenLite a menudo, no es que no sea útil pero no es lo más práctico del mundo.

Usando TweenLite con propiedades CSS

Vamos a cambiar la caja para no hacer ya una cuenta atrás. Vamos a ver cómo podemos hacer que la caja se desvanezca mientras se hace más chica.

El código HTML es ahora este:

<div class="caja">  
。◕‿◕。
</div>  

El código JavaScript se ha simplificado enormemente.

let caja = document.querySelector('.caja');  
let tween = TweenLite.to(  
  caja,
  5,
  {
    opacity: 0,
    scale: 0
  }
);

Veamos las diferencias en el código. Esta vez el objetivo no es ya temporizador, si no la propia caja ya que queremos hacer una transición de propiedades en el propio elemento. Hemos reducido la duración de 10 a 5 segundos y, el objeto con las transiciones indica que queremos pasar a tener una opacidad de 0 (para que se haga transparente) y que escale a 0, de manera que se haga minúscula.

Veamos cómo queda:

Ver demo Desvaneciéndose en CodePen.

¡Sexy!

Secuenciando Tweens

Hasta ahora hemos visto cómo podemos ejecutar un Tween pero las cosas se vuelven más interesantes cuando podemos secuenciar varios Tweens.

Veamos el nuevo código JavaScript:

let caja = document.querySelector('.caja');  
TweenLite.to(caja, 1, { y: 50 });  
TweenLite.to(caja, 1, { x: 50, delay: 1 });  
TweenLite.to(caja, 1, { y: 0, delay: 2 });  
TweenLite.to(caja, 1, { x: 0, delay: 3 });  
TweenLite.to(caja, 1, { opacity: 0, scale: 0, delay: 4 });  

La sintaxis es bastante similar a lo que hemos visto hasta ahora. delay nos permite retrasar la ejecución de un Tween en tantos segundos como indiquemos. Dado que estamos aplicando transiciones de un segundo cada una, y queremos (para el ejemplo) que se ejecuten secuencialmente, el valor delay se va incrementando en 1 segundo para cada nueva transición. No obstante, ¡puedes usar otros valores!

Las propiedades x e y nos permiten mover un elemento en sus ejes horizontal y vertical respectivamente.

Veamos cómo queda:

Ver Secuenciando, que es gerundio en CodePen.

Callbacks

Ya hemos visto cómo usar callbacks para hacer algo en cada actualización usando onUpdate. Los tweens tienen varias callbacks que pueden serte útiles:

  • onStart: Esta función es llamada cuando el Tween comienza a ocurrir.
  • onUpdate: Esta función es llamada cuando el Tween se actualiza.
  • onComplete: Esta función es llamada cuando el Tween termina.

En resumen

Este ha sido un rápido vistazo a lo que TweenLite puede hacer por nosotros. El API de TweenLite está a tu disposición para que le eches un vistazo, eso sí, en Inglés. TweenLite cuenta con muchas más funciones que no es únicamente to, existe from, fromTo o set por ejemplo, pero en mi día a día no me he visto en la necesidad de usar nada que no sea to por lo que he decidido obviarlas a efectos de esta breve introducción.

Te recomiendo que experimentes y, si encuentras algo que falta, ¡me avises!

Próximamente veremos otros usos que podemos darle a TweenLite, usos más prácticos y veremos también como podemos crear Timelines y para qué usarlas.

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!