GSAP Timeline

Encadena animaciones en secuencia con control total. El overlap con '-=0.3' es lo que hace que se vea fluido.

Tu producto aquí

La descripción que convierte visitantes en clientes

Empezar gratis

Código

const tl = gsap.timeline()

// Las animaciones se encadenan en secuencia
tl.from(title, { y: -30, opacity: 0, duration: 0.6 })
  .from(subtitle, { y: 20, opacity: 0, duration: 0.5 }, "-=0.3")
  .from(button, { scale: 0.8, opacity: 0, duration: 0.4 }, "-=0.2")

// "-=0.3" significa que empieza 0.3s ANTES de que termine la anterior
// Eso crea el efecto de overlap que se ve fluido y profesional