😩 El problema antes de GSAP
Animar elementos con CSS puro para video es doloroso: keyframes manuales, temporización a ojo e imposibilidad de coreografiar secuencias complejas. GSAP lo resuelve con una API clara y precisa.
✗ CSS puro para animación de video
- ✗Temporización manual de cada keyframe: propensa a errores.
- ✗Las secuencias encadenadas requieren calcular los delays manualmente.
- ✗Sin control programático: no puedes "pausar a la mitad".
✓ GSAP para animación de video
- ✓Línea de tiempo declarativa: cada elemento aparece en el momento adecuado.
- ✓Posicionamiento relativo: "<0.3" = 300ms después del anterior.
- ✓Seek en cualquier frame: integración natural con Remotion.
⌛ Stagger — tarjetas que entran en secuencia
O stagger es el delay progresivo entre elementos de un grupo. En vez de entrar todos al mismo tiempo, cada uno espera un poco al anterior — creando una sensación de "cascada" profesional.
↑ Cada card entra 250ms después de la anterior. En GSAP: stagger: 0.25
gsap.from(".card", {
y: 22,
opacity: 0,
duration: 0.55,
ease: "power2.out",
stagger: 0.25 // 250ms entre cada card
});🎯 Easing — la curva que define el tono
Linear parece robótico. Ease-out parece natural. Elastic parece juguetón. La elección del easing es tan importante como el movimiento en sí: comunica la personalidad de la animación.
💡 Consejo de oro
Para UIs y diapositivas use power2.out — entra rápido y se estabiliza. Para elementos que salen use power2.in — empieza suave y termina con velocidad. Reserva elastic para momentos puntuales de énfasis.
🎼 Timeline coreografiada
A Línea de tiempo de GSAP es un director de animaciones: defines cuándo entra cada elemento con respecto al anterior, creando coreografías complejas con código sencillo.
const tl = gsap.timeline();
tl.from("#elem-a", { x: -40, opacity: 0, duration: 0.6 })
.from("#elem-b", { y: 20, opacity: 0, duration: 0.5 }, "<0.3")
.from("#elem-c", { x: 40, opacity: 0, duration: 0.7 }, "<");🔗 GSAP + Remotion — integración frame-perfect
Remotion renderiza cada frame de forma determinista — para el mismo número de frame, siempre el mismo aspecto visual. GSAP lo respeta mediante seek(): en vez de ejecutar la animación en tiempo real, «saltas» al frame exacto.
🧠 Concepto central
En Remotion, useCurrentFrame() devuelve el fotograma actual (p. ej., 60 en 30fps = 2 segundos). Conviertes este fotograma en "segundos" y llamas a tl.seek(seconds) — GSAP posiciona todos los elementos en el estado correcto para ese instante.
const { fps } = useVideoConfig();
// Seek al segundo exacto de este frame
tl.seek(frame / fps);
💡 ¿Por qué no usar animaciones CSS?
Las animaciones CSS no tienen seek(). Remotion toma capturas frame por frame: sin seek, la animación siempre aparecería en el estado t=0. GSAP lo resuelve de forma nativa.
🚀 De la landing page al video — el flujo con Claude
El enfoque más productivo: pedirle a Claude una landing page estática primero — componentes visuales listos, tipografía, colores, espaciado. Luego, en una segunda conversación, pedir que lo transforme en animación GSAP para Remotion.
Prompt de diseño
"Crea una landing page en React para un SaaS con hero, 3 características y CTA. Sin animaciones todavía."
Revisión visual
Ajusta los colores, la tipografía y los espacios. Asegúrate de que el aspecto visual sea correcto antes de animar.
Prompt de transformación
"Ahora conviértelo en una composición de Remotion con GSAP. La sección Hero aparece con fade-up, las características entran en stagger de 0.2s y el CTA con bounce."
Renderizar y exportar
npx remotion render — MP4 listo para publicar.
🎯 Ideal para
Introducciones a SaaS, videos de lanzamiento, recorridos de producto, diapositivas de presentación — cualquier contenido con estructura de secciones y revelación progresiva.
📋 Resumen del módulo
Lo que aprendimos
- ✓GSAP es el estándar de animación web por su precisión y API clara
- ✓Stagger crea cascadas profesionales con una línea de código
- ✓El easing define la personalidad de la animación
- ✓La línea de tiempo coreografía secuencias complejas con posicionamiento relativo
- ✓seek() integra GSAP con el rendering determinístico de Remotion
- ✓El flujo landing → video maximiza la velocidad de producción
Siguiente módulo
Comparación detallada: cuándo destaca cada herramienta y por qué GSAP gana en el contexto del video renderizado.