Comience con GreenSock Animation Platform

Logotipo de GreenSock Animation Platform

GreenSock Animation Platform (GSAP) le permite animar cualquier cosa a la que pueda acceder con JavaScript, incluidos DOM, Canvas y CSS, así como sus propios objetos personalizados.

GSAP también ayuda a resolver las inconsistencias del navegador para facilitar prueba de usuario , le permite usar objetos para administrar animaciones complejas y se ejecuta hasta 20 veces más rápido que jQuery. Se ha convertido en un estándar en la industria y se ha utilizado en innumerables sitios web galardonados.

01. Configurar un archivo HTML básico

Comience con GSAP: configure un archivo HTML básico



Incluya una imagen con el logo class en su archivo HTML

La mejor manera de aprender GSAP es verlo en acción. En este tutorial, aprenderá sobre las características clave de la plataforma con ejemplos de trabajo que puede poner en práctica en sus proyectos hoy.

Comience configurando un archivo HTML básico, donde puede colocar su código JavaScript. Incluya una imagen con un logo clase. Utilizará GSAP para animar propiedades y ver cómo funciona.

|_+_|

02. Incluir biblioteca GSAP

A continuación, deberá agregar GSAP a su proyecto web. Entre tu y etiquetas, inserte un enlace a la biblioteca GSAP. Puede descargar el ZIP directamente desde aquí o cógelo de GitHub . Los archivos también se alojan en el CDN de Cloudflare ultrarrápido, por lo que la forma más sencilla es utilizar los archivos alojados de esta manera:

|_+_|

03. Animar con interpolación

La interpolación es el proceso de cambiar un valor con el tiempo para crear una animación. Por ejemplo, mover un objeto de A a B, escalarlo o rotarlo. También puede interpolar sus propios valores personalizados.

La forma más sencilla de interpolar una propiedad es utilizar el TweenMax.to() función. Esto necesita un objeto objetivo, una duración y los pares de propiedad / valor que está animando. Para ver la función en acción, pruebe cada una de las siguientes líneas de código usando el logo como objeto de destino:

|_+_|

04. Tween from y FromTo

Introducción a GSAP: Tween from y FromTo

Puede definir valores tanto de inicio como de finalización para la interpolación

Puede interpolar una propiedad de su valor actual a uno nuevo usando a() , pero también puedes interpolar desde un valor a su valor actual. Por ejemplo, si tu logo está comenzando en la posición x 0 y quieres que termine ahí, puedes hacer esto:

|_+_|

En este caso, su logotipo se moverá inmediatamente a x=400 y luego entre x=0 . Incluso puede definir los valores inicial y final, ignorando los valores actuales usando fromTo () como esto:

|_+_|

05. Alivio

Comience con GSAP: Facilitación

Facilitar agrega carácter a sus animaciones

La suavización es el 'estilo' de la animación, ya que los valores pasan de A a B. En lugar de una tasa de velocidad constante, que se llama 'lineal', puede aplicar funciones para curvar la tasa de velocidad. ¿Comienzan lentamente y se aceleran gradualmente? ¿Se detienen abruptamente y rebotan un poco al final? En la animación, estos estilos añaden carácter y emoción a su trabajo. Puede aplicar una función de aceleración como esta:

|_+_|

06. Funciones de flexibilización y entrada / salida

Comience con GSAP: funciones de flexibilización y entrada / salida

Hay muchas opciones de facilitación para elegir con GSAP

GSAP incluye una variedad de funciones de aceleración, como espalda , rebotar , elástico , sin , circo , y expo . También puede haber notado que el facilidad función tiene una propiedad de facilidad en , que usamos en el paso anterior. También puedes usar Facilitarse y easyInOut . Estos indican dónde se aplica la curva de suavizado en la animación. Pruebe lo siguiente para ver los resultados:

|_+_|

07. Retrasar una interpolación

A veces querrá retrasar el inicio de una animación, ya sea para sincronizarla con otra animación o para hacerla esperar a que ocurra un evento. Puede utilizar las propiedades especiales de otro GSAP llamado demora para hacer esto. Pruebe el siguiente código para ver cómo puede retrasar las interpolaciones para un momento específico:

|_+_|

08. Funciones de devolución de llamada

Para integrar animaciones con su código, es importante saber cuándo ocurren los eventos, especialmente cuando una animación termina o comienza. Puedes usar el onComplete devolución de llamada de evento para esto. Es posible que desee saber cuándo comienza una interpolación, usando onStart . Y es posible que también desee sincronizar su interpolación con otra animación, o utilizar la interpolación y su aceleración para actualizar algún otro objeto personalizado. Utilizar el onUpdate devolución de llamada para esto. Así es como se usa la devolución de llamada:

|_+_|

09. Parámetros de devolución de llamada

Al disparar devoluciones de llamada, es posible que desee pasar información junto con la devolución de llamada a la función que la maneja. Es posible que deba pasar información sobre la persona que llama o valores específicos. Esto le permite integrar sus animaciones con el resto de su base de código. Todos los parámetros se pasan a través de devolución de llamada + 'Params' , eso es onUpdateParams .

En el siguiente ejemplo, puede realizar un seguimiento del progreso de la interpolación utilizando la palabra clave {uno mismo} y puede ver cómo pasar múltiples parámetros usando una matriz:

|_+_|

10. Control de animaciones

Bien, ahora puede crear interpolaciones y facilitar las interpolaciones, activar devoluciones de llamada y parámetros. ¿Pero cómo controlas las animaciones? A menudo, desea iniciarlos o detenerlos en función de otros eventos.

Si necesita detener una animación, puede usar el pausa() método. Si desea reanudar una interpolación, utilice reanudar() . Para destruir totalmente el uso de una interpolación matar() . Pruebe lo siguiente y vea qué sucede:

|_+_|

11. CSS y CSSPlugin

Comience con GSAP: CSS y CSSPlugin

El CSSPlugin detecta automáticamente cuando es necesario para animaciones

El CSSPlugin se incluye cuando usa TweenMax . Es un gran ahorro de tiempo, ya que normaliza los comportamientos en los navegadores y detecta automáticamente cuando es necesario para las animaciones. CSSPlugin puede manejar interpolaciones de color, animaciones SVG y rendimiento optimizado con almacenamiento en caché y otros trucos internos, y a menudo es más eficiente traducir posiciones a través de CSS.

Ya ha visto esto en acción cuando utilizó el opacidad y posición animaciones. ¡Funciona sin ningún código especial!

12. Transformaciones 2D y 3D

Empiece con GSAP: transformaciones 2D y 3D

GSAP incluye transformaciones integradas que le permiten escalar, rotar, trasladar y sesgar

Las transformaciones CSS le permiten escalar, rotar, traducir y sesgar. Funcionan tanto en 2D como en 3D para crear hermosos efectos rápidamente. GSAP incluye propiedades de transformación integradas como x , y , rotación , rotacionX , rotaciónY , skewX y escala . Intente aplicar la siguiente interpolación a su imagen en lugar de las que ya hemos probado:

|_+_|

13. Plazos

Comience con GSAP: líneas de tiempo

El objeto de la línea de tiempo de GSAP le permite administrar múltiples animaciones

Una vez que pase de uno o dos interpolaciones, es posible que se pregunte cómo administrar varias animaciones. GSAP incluye un cronología objetar hacer exactamente eso. Agrega interpolaciones al cronología objeto y puede utilizar el posición parámetro después de la interpolación para cronometrarlos. Puede hacer que los preadolescentes se ejecuten uno tras otro, o que tengan espacios o incluso se superpongan. Agrega un par de imágenes más a tu HTML con clases logo2 y logo3 respectivamente.

Para ver cómo funciona, pruebe lo siguiente cronología código:

que fuente eres filtro instagram
|_+_|

14. Control cronológico

Además de controlar las animaciones, es posible que también desee controlar las líneas de tiempo. Afortunadamente, puede pausar, reanudar y revertir como puede hacerlo con las animaciones. También puede agregar parámetros a la línea de tiempo para repetir , yoyó y agregue devoluciones de llamada para toda la línea de tiempo. También puede controlar la velocidad de una línea de tiempo con el timeScale propiedad. Intente reemplazar su declaración de línea de tiempo con el siguiente código para ver cómo funciona:

|_+_|

15. Obtener y establecer propiedades

Una característica que es realmente útil es obtener y establecer propiedades de interpolaciones y líneas de tiempo. De esa manera, puede conocer el progreso general y la duración, o recopilar otra información, sobre un objeto GSAP. En este ejemplo de código puede obtener la duración de la línea de tiempo, y luego colocar su duración para cambiarlo. Esto funciona igual para los preadolescentes. Es otra excelente manera de reaccionar en tiempo real a los eventos y modificar animaciones sobre la marcha. Agregue lo siguiente después de su código de línea de tiempo anterior:

|_+_|

  Este artículo se publicó originalmente en la revista de diseño web creativo Web Designer. Comprar número 279 o suscribir .  

Leer más: