Comience con la plataforma de animación de Greensock

Sep 13, 2025
Cómo
GreenSock Animation Platform logo
[dieciséis]

La plataforma de animación de Greensock (GSAP) le permite animar cualquier cosa que pueda acceder con Javascript, incluido DOM, lienzo y CSS, así como sus propios objetos personalizados.

GSAP también ayuda a resolver las inconsistencias del navegador para más fácil Pruebas de usuario (bien Alojamiento web También puede ayudar aquí, también le permite usar objetos para administrar animaciones complejas y se ejecutan 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 premiados. ¿Tienes un sitio para construir? Aquí está nuestra guía de lo mejor. Creador de sitios web alrededor.

01. Configure un archivo HTML básico

Get started with GSAP: Set up a basic HTML file

[dieciséis] Incluir una imagen con el logo Clase 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 usar en sus proyectos hoy!

Comience por configurar un archivo HTML básico, donde puede caer en su código JavaScript. Incluir una imagen con un logo clase. Usará GSAP para animar las propiedades para ver cómo funciona. 

 & lt; html lang = "en" & gt;
& lt; cabeza y gt;
  & lt; estilo & gt;
    .logo {ancho: 150px; }
  & lt; / estilo & gt;
& lt; / cabeza y gt;
& lt; cuerpo y gt;
& lt; img class = "logo"
src = "logo.svg" / & gt;
& lt; script & gt;
// código aquí
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

02. Incluir Biblioteca GSAP

A continuación, deberá agregar GSAP a su proyecto web. Entre tu & lt; image & gt; y & lt; script & gt; Etiquetas, inserte un enlace a la biblioteca GSAP. Puede descargar el zip directamente desde aquí o agarrarlo de Github (Si tiene archivos para compartir, elija el perfecto almacenamiento en la nube ). Los archivos también se alojan en el CDN Super-Fast CloudFlare, por lo que la forma más sencilla es usar los archivos alojados como este: 

 & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/tweenmax.min.js" & gt; & lt; / script & gt;

03. Animar con el penez.

El acertado es el proceso de cambiar un valor con el tiempo para crear una animación. Por ejemplo, moviendo un objeto de A a B, escalándolo o girándolo. También puede entre sus propios valores personalizados.

La forma más sencilla de entre una propiedad es usar el Tweenmax.to () función. Esto necesita un objeto objetivo, una duración y los pares de propiedades / valor que está animando. Para ver la función en acción, pruebe cada una de las líneas de código a continuación usando el logo Como objeto objetivo: 

 // Tween X Posición de la corriente
a 400 más de 2 segundos
TWEENMAX.TO (". LOGO", 2, {x: 400});
// Tween y posición de la corriente
a 200 y opacidad a 0, más de 1
segundo
TWEENMAX.TO (". LOGO", 1, {Y: 200, Opacidad: 0});
// Tween x e y a 100, escala a
1.5, y rotar 90 grados, más de 2
segundo
Tweenmax.to (". Logo", 2, {x: 100, y: 100, escala: 1.5, rotación: 90});

04. Entre y desde

Get started with GSAP: Tween from and FromTo

[dieciséis] Puede definir los valores de inicio y final para el acertado

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

 TweenMax.Desfrom (". Logo", 2, {x: 400});

En este caso, su logotipo se moverá de inmediato a x = 400 y luego entre x = 0 . Incluso puede definir los valores de inicio y final, ignorando los valores actuales utilizando deto () como esto: 

 TweenMax.fromto (". Logo", 2, {x: 400}, {x: 200});

05. facilitando

Get started with GSAP: Easing

[dieciséis] El alivio agrega carácter a tus animaciones.

La flexibilización es el 'estilo' de la animación, ya que los valores de la transición de A a B. En lugar de una velocidad de velocidad constante, que se llama "lineal", puede aplicar funciones para curvar la velocidad de velocidad. ¿Comienzan lentamente y se aceleran gradualmente? ¿Vienen a una parada abrupta y rebotan un poco al final? En la animación, estos estilos agregan carácter y emoción a tu trabajo. Puede aplicar una función de flexibilización como esta: 

 TweENMAX.TO (". LOGO", 2, {x: 100, y: 100, rotación: 90, facilidad: circunscripción.

06. Funciones aliviando y dentro / fuera

Get started with GSAP: Easing functions and In / Out

[dieciséis] Hay muchas opciones para elegir con GSAP

GSAP incluye una variedad de funciones facilitadas, como espalda De rebotar De elástico De pecado De encubrir , y expo . Es posible que también hayas notado que el facilidad la función tiene una propiedad de facilidad en , que utilizamos en el paso anterior. También puedes usar Facilitarse y aficionado . Estos indican dónde se aplica la curva de flexibilación en la animación. Pruebe lo siguiente para ver los resultados: 

 // saliendo con un rebote
TWEENMAX.TE (". LOGO", 2, {x: 100, y: 100, rotación: 90, facilidad: rebote.easeut});
// aliviar y salir con elástico
TWEENMAX.TO (". LOGO", 2, {x: 100, Y: 100, Rotación: 90, Facilidad: Elastic.EseNout});

07. retrasar un entre

A veces, querrá retrasar el inicio de una animación, ya sea para sincronizarlo con otra animación, o para que espere a que se produzca un evento. Puedes usar otras propiedades especiales de GSAP llamadas demora para hacer esto. Pruebe el siguiente código para ver cómo puede retrasar a los preferentes para el tiempo específico: 

 TWEENMAX.TO (". LOGO", 1, {Y: 100, FAIL: BOUNTE.EAUT});
// retrasa este tween por 1 seg
TWEENMAX.TO (". LOGO", 1, {Rotación: 90, Facilidad: CIRCE.EAUT, Retraso: 1});

08. Funciones de devolución de llamada

Para integrar las animaciones con su código, es importante saber cuándo ocurren eventos, especialmente cuando una animación termina o comienza. Puedes usar el complemento Evento de devolución de llamada para esto. Es posible que desee saber cuándo comienza un Tween, usando optimista . Y también es posible que desee sincronizar su entrevistado con otra animación, o usar el Tween y su facilitación de actualizar algún otro objeto personalizado. Utilizar el ondulado devolución de llamada para esto. Aquí es cómo usas la devolución de llamada: 

 TWEENMAX.TO (". LOGO", 1, {
Y: 100,
Facilidad: Bounce.Eseut,
Oncompleta: Tweencomplete
});
Función tweencomplete () {
console.log ("Tween completo");
}

09. Parámetros de devolución de llamada

Al activar las devoluciones de llamadas, 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 seguir el progreso de los Tween usando la palabra clave {uno mismo} y puede ver cómo pasar varios parámetros usando una matriz: 

 TWEENMAX.TO (". LOGO", 1, {
Y: 100,
Facilidad: Bounce.Eseut,
ONUPDATE: TweenUpdate,
onupdateparams: ["{auto}",
"terminado"]
});
función tweenupdate (Tween,
mensaje) {
Var porcentaje = entre.
progreso () * 100; // Progreso()
es un valor 0-1
console.log (porcentaje +
"" Mensaje +);
}

10. Control de animaciones.

Está bien, para que ahora pueda crear en los que se alimentan y faciliten los parámetros con los que se alimenta. Pero, ¿cómo controlas las animaciones? A menudo desea comenzar o detenerlos en función de otros eventos.

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

 // var para mantener la referencia a ambos
var tween = tweenmax.to (".
logo ", 2, {y: 100, facilidad: rebote.
Facilitarse });
// pausa inmediatamente
Tween.Pause ();
// Iniciar en el evento
Settimeout (función () {Tween.
reanudar ()}, 1000);
// Animación inversa en el evento
Settimeout (función () {Tween.
reverso ()}, 3000);

11. CSS y CSSPLUGIN

Get started with GSAP: CSS and CSSPlugin

[dieciséis] El CSSplugin se detecta automáticamente cuando se necesita para animaciones.

El CSSplugin se incluye cuando usas. TweENMAX . Es un enorme ahorro de tiempo, ya que se normaliza comportamientos a través de los navegadores y se detecta automáticamente cuando se necesita para animaciones. CSSPLUGIN puede manejar los tipos de colores, animaciones SVG y un rendimiento optimizado con el almacenamiento en caché y otros trucos internos, y a menudo es más eficiente traducir posiciones a través de CSS.

Ya has visto esto en acción cuando usaste el opacidad y posición animaciones ¡Funciona sin codificación especial!

12. 2D y 3D Transforma.

Get started with GSAP: 2D and 3D transforms

[dieciséis] GSAP incluye transformaciones incorporadas que le permiten escalar, rotar traducir y sesgar

Las transformaciones CSS le permiten escalar, rotar traducir y sesgarlo. Trabajan tanto en 2D como en 3D para crear hermosos efectos rápidamente. GSAP incluye propiedades de transformación incorporada, como X De y De rotación De rotationx De rotatorio De skewx y escala . Intente aplicar los siguientes tween a su imagen en lugar de los que ya hemos probado: 

 TWEENMAX.TO (". LOGO", 3, {
x: 100,
Y: 100,
Escala: 1.5,
rotaciony: 360,
Facilidad: Bounce.easeut});

13. Timelines

Get started with GSAP: Timelines

[dieciséis] El objeto de la línea de tiempo de GSAP le permite administrar múltiples animaciones

Una vez que se mueve más allá de uno o dos preferentes, puede estar preguntándose cómo administrar múltiples animaciones. GSAP incluye un línea de tiempo objeto para hacer exactamente eso. Anexas a los idiomas a la línea de tiempo objeto y puede usar el posición Parámetro después de los Tween a la vez. Puede tener a los que se ejecuten a los que se ejecuten uno tras otro, o tenga brechas, o incluso se superpongan a ellos. Añadir un par de más imágenes a su HTML con clases logo2 y logo3 respectivamente.

Para ver cómo funciona, prueba lo siguiente. línea de tiempo código: 

 // Crear una instancia de línea de tiempo
var tl = nuevo timelinemax ();
tl.add (tweenmax.to (". logo", 1,
{x: 50}));
// Note el "0" final para hacer
Este comienza a las 0 segundos.
tl.add (tweenmax.to (". logo2", 1,
{Y: 100}), "0");
// Note el "+.25" para hacer esto
Un comienzo en .25 seg.
tl.add (tweenmax.to (". logo3", 1,
{rotaciony: 180, y: 50,
X: 50}), "+. 25");

14. Control de la línea de tiempo

Además de controlar las animaciones, es posible que desee controlar las líneas de tiempo. Afortunadamente, puedes pausar, reanudar y revertir igual que usted puede con las animaciones. También puede agregar parámetros a la línea de tiempo a repetir De 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 usando el escala de tiempo propiedad. Intente reemplazar su declaración de línea de tiempo con el siguiente código para ver cómo funciona: 

 var tl = nuevo timelinemax ({
// repetir infinitamente
Repetir: -1,
yoyo: verdadero,});

15. Obtener y establecer propiedades.

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

 // Obtenga la duración actual de
la línea de tiempo
console.log (tl.duración ());
// establece la duración a 5 segundos
Después de una espera de 2 segundos
Settimeout (función () {
tl.duración (5);
}, 2000);

Este artículo se publicó originalmente en Creative Web Design Magazine Web Designer. Comprar emisión 279 o suscribir .

Leer más:

  • Animaciones SVG de supercarga con GSAP
  • Exportar After Effects Animations to HTML5
  • Cómo crear animaciones que escalan para todos los dispositivos.

Cómo - Artículos más populares

Cómo simplificar la creación de la forma de mezcla en maya

Cómo Sep 13, 2025

[dieciséis] (Crédito de la imagen: Antony Ward) En mayas, las formas de mezcla, o los objetivos de morph, ya que también se..

Una guía para las herramientas web de Google

Cómo Sep 13, 2025

[dieciséis] Página 1 de 5: Ver y cambiar HTML, CSS & AMP; Js Ver y cambiar HTML, CSS..

Cómo preparar un archivo para imprimir

Cómo Sep 13, 2025

[dieciséis] Como trabajador de arte en Wieden + kennedy Londres, yo Diseño para imprimir regularmente. Hay cier..

Crea texturas orgánicas en tinta

Cómo Sep 13, 2025

[dieciséis] Dibujo con tinta Produce vastas posibilidades. Hay formas simples pero efectivas de crear hermosas texturas orgá..

Cómo pintar reflexiones convincentes

Cómo Sep 13, 2025

[dieciséis] Las técnicas de pintura digital permiten representar las reflexiones en vidrio de una manera relativamente sencilla. Cier..

La guía definitiva para componer imágenes en Photoshop

Cómo Sep 13, 2025

[dieciséis] De todos los proyectos de Photoshop, composición de imágenes en un marco fantástico es quizás la búsqueda más placen..

Cómo crear una hermosa pintura de paisajes de acuarela

Cómo Sep 13, 2025

[dieciséis] El mío es un estilo bastante impresionista de una acuarela. técnica de pintura , donde el detalle es menos im..

Cómo esculpir y plantear una cabeza de dibujos animados en Zbrush

Cómo Sep 13, 2025

[dieciséis] Cuando quise crear una pieza divertida de Arte 3d Con una expresión tonta, vi un concepto por Randy Bishop, re..

Categorías