Creando animaciones con GSAP | GreenSock

Como diseñadores/desarrolladores, a veces nos enfrentamos a un proyecto que requiere animación. Podría ser simple o la animación más complicada que hayas visto antes. Por lo tanto, necesitamos usar la herramienta adecuada para la ocasión, una que nos pueda brindar un buen rendimiento sin sacrificar su poder. En ese caso, déjame presentarte GSAP: GreenSock Animation Platform.

GSAP es una biblioteca Javascript muy robusta que nos permite crear animaciones basadas en Timeline con gran precisión y confiabilidad. Basado en sus propias palabras: una animación profesional de ultra alto rendimiento para la web moderna. Pero no tome esto por sentado. Veamos qué podemos hacer con él. No vamos a hacer nada elegante o súper llamativo, pero con suerte después de leerlo, sabrá más sobre la plataforma, sus propiedades básicas y su uso.

Empezando

Antes de comenzar, necesitamos agregar la biblioteca a nuestro proyecto. La forma más sencilla de hacerlo es utilizando el CDN con una etiqueta de script.

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

Además, tiene la opción de usar NPM

npm install gsap

Para ver una guía más detallada sobre cómo importar cosas y trabajar con Webpack y otras herramientas relacionadas, visite la documentación relacionada.

¿Qué son Tweens?

Tweens son las funciones básicas de animación dentro de GSAP. Hay un tween básico: Tweenlite, que es la base de las otras herramientas disponibles y se puede combinar con otras interpolaciones para crear efectos aún más impresionantes. Entonces, ¿por qué no creamos nuestra primera animación?

Supongamos que tiene un rectángulo rojo y desea cambiar su color a azul mientras cambia su posición.

TweenLite.to("#rectangle", 2, {
    top: "200px",
    left: "120px",
    backgroundColor: 'blue'
});

Bastante fácil, ¿verdad? Entonces, entendamos lo que hicimos.

TweenLite es la función principal que le dice a nuestro archivo Javascript que vamos a animar con GSAP. El método .to es la parte que indica que deseamos animar desde un estado inicial definido en nuestro CSS a las propiedades que vamos a asignar a continuación. Luego definimos nuestro objeto, con un conjunto de propiedades que nos permiten animar lo que queremos. Usamos un selector tipo CSS para llamar a nuestro objeto HTML, después de la coma definimos cuánto durará la animación. Y finalmente, configuramos las propiedades para que se animen.

Tenga en cuenta que GSAP tiene muchas características y configuraciones para administrar su animación. Una de ellas son las easing options, que le permiten especificar qué tipo de facilidad desea en su animación.

Parece que esto es demasiado básico para usted, ¿no? Ok, vamos a sumergirnos en las animaciones de secuencias múltiples.

Animaciones de secuencia múltiple

Las animaciones de secuencia múltiple son aquellas en las que se producen diferentes animaciones o efectos, uno a la vez o simultáneamente. Eso se llama una Timeline. Para administrarlos, GSAP nos cubre con su herramienta TimelineLite. Esta herramienta actúa como un contenedor para otras interpolaciones o incluso otras Timelines, y las controla de manera efectiva sin esfuerzos. Veamos un ejemplo.

Como siempre, puede usar el CDN para agregar el complemento a su proyecto o usar NPM. Aquí vamos a usar el CDN para facilitar las cosas.

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineLite.min.js

A continuación, en nuestro archivo javascript, definimos una variable y le asignamos una nueva Timeline.

let tl = new TimelineLite;<br>

Después de hacer eso, queremos comenzar nuestra animación. Animemos el anterior e intentemos imitar su comportamiento pero con nuestra Timeline.

tl.to("#rectangle", 2, {
    x: 200,
    y: 420,
    backgroundColor: "blue",
    ease: Sine.easeIn
})

Observe que ya no usamos la función TweenLite sino la variable definida en nuestra primera línea. Además, para mover nuestro objeto no vamos a utilizar las propiedades anteriores de tipo CSS, sino X y una Y, que actúa de la misma manera. Agregamos un tipo diferente de facilidad, el Sine con su propiedad de easeIn. Aumentamos la cantidad en las propiedades de posición para hacerlo más dramático.

Hasta ahora, todo bien. Ahora necesitamos agregar otra Timeline o animación a este mismo objeto. Hagámoslo así.

.to("#rectangle", 1, {
    rotation: 30,
    x: 20,
    y: 600,
    backgroundColor: "black",
    ease: Back.easeIn
})

¿Cuan genial es eso? Verá que puede agregar muchas animaciones como desee con el método .to y unirlas como una sola. Ese es el poder de Timeline y sus múltiples secuencias. Oye, ¿quieres agregar otro?

.to("#rectangle", 1, {
    rotation: 200,
    x: 120,
    y: 200,
    backgroundColor: "red",
    ease: Power4.easeIn
})

Pudo ver el poder y la simplicidad de la plataforma GSAP. Es muy fácil de usar y comprender, y su curva de aprendizaje es muy cómoda. Pero no deje que este pequeño ejemplo lo engañe; GSAP es muy poderoso y puede animar casi todo lo que Javascript puede tocar. Puede ver algunos ejemplos de lo que GSAP puede hacer por usted y/o su equipo.

Eso es todo. Un vistazo a una plataforma robusta, sólida y fácil para animar su próximo proyecto.