GSAP Timeline · Skill Demo · CULTIVA IA

Automatiza tu marketing
con IA de siguiente nivel

NeuroSync orquesta tus flujos de trabajo con inteligencia artificial. Menos clics, más resultados. Para equipos que no quieren perder tiempo.

🤖 Automatización IA
Sync en tiempo real
📊 Analytics avanzados
app.neurosync.ai/dashboard
Principal
📊 Dashboard
⚡ Flujos
🤖 Agentes IA
📧 Campañas
⚙️ Config
Leads / mes
2.847
↑ +23% vs anterior
Conversión
8.4%
↑ +1.2pp
MRR
€14.2K
↑ +18%
Leads últimas 7 semanas
Control del GSAP Timeline
1
Logo & Tagline
2
Subtitle
3
Pills cascada
4
Dashboard
5
CTA Bounce
Código GSAP Timeline — posición, labels y anidación
// 1. Crear el timeline con defaults compartidos
const tl = gsap.timeline({
  defaults: { duration: 0.7, ease: "power3.out" },
  paused: true,
  onUpdate: updateProgress
});

// 2. Logo + tagline en paralelo (posición "<")
tl.to("#logo", { opacity: 1, y: 0 })
 .to("#tagline", { opacity: 1, y: 0 }, "<0.15")

// 3. Etiqueta 'intro' — subtitle aparece justo después
 .addLabel("intro")
 .to("#subtitle", { opacity: 1, y: 0 }, "intro")

// 4. Pills en cascada (stagger con overlap "-=0.3")
 .to(".pill-1", { opacity: 1, y: 0, scale: 1 }, "-=0.3")
 .to(".pill-2", { opacity: 1, y: 0, scale: 1 }, "<0.15")
 .to(".pill-3", { opacity: 1, y: 0, scale: 1 }, "<0.15")

// 5. Dashboard scale desde abajo
 .to("#dashboard-wrap", { opacity: 1, y: 0, scale: 1, duration: 1 })

// 6. Etiqueta 'outro' — CTA con bounce
 .addLabel("outro")
 .to("#cta-group", {
   opacity: 1, y: 0, scale: 1,
   ease: "elastic.out(1, 0.5)", duration: 0.9
 }, "outro");

// Iniciar automáticamente
tl.play();