En este proyecto recreamos la animación de texto en la página oficial de GSAP, utilizando la misma biblioteca.
En este proyecto se utilizan varios conceptos clave de GSAP:
Timeline: Una secuencia de animaciones que pueden controlarse de forma conjunta.
const tl = gsap.timeline();
from: Define el estado inicial de la animación.
tl.from(".a", { rotateX: -360, duration: 1 });
to: Define el estado final de la animación.
tl.to("#circles", { scale: 1, duration: 1, ease: "elastic.out(1, 0.5)" });
ease: Controla la velocidad de la animación, creando efectos más naturales.
ease: "elastic.out(1, 0.5)";
delay: Retrasa el inicio de la animación.
delay: 1;
rotation: Aplica una rotación al elemento.
También ver: rotación direccional
rotation: 360;
repeat: Repite la animación un número específico de veces.
// -1 para repetición infinita
repeat: -1;
repeatDelay: Define un retraso entre cada repetición de la animación.
repeatDelay: 1;