🎯 Dos paradigmas completamente diferentes
GSAP y Framer Motion no compiten: sirven a contextos opuestos. Uno está diseñado para controlar al máximo el tiempo; el otro, para reaccionar al usuario. Entender esta diferencia fundamental evita horas de frustración.
🟢 GSAP — paradigma del tiempo
- ✓Basado en una línea de tiempo absoluta: t=0 siempre es igual.
- ✓Seek() para cualquier punto en el tiempo.
- ✓Frame renderizado ≡ frame en el video final.
⚛️ Framer Motion — paradigma de estado
- →Basado en física: spring, inertia, drag.
- →Las animaciones se activan en respuesta a interacciones.
- →El resultado depende del momento elegido por el usuario; no es determinista.
📊 Matriz de decisión
Usa esta tabla como referencia rápida. Antes de elegir la biblioteca, identifica el contexto de consumo: video renderizado (MP4) o interfaz interactiva (browser/app).
| Criterio | GSAP | Framer Motion |
|---|---|---|
| Video renderizado (Remotion) | ✓ Ideal | ✗ No funciona |
| Animación determinista | ✓ Nativo | ✗ Depende de la interacción |
| Hover / arrastre / gestos | Posible, pero verboso | ✓ Nativo y elegante |
| Prototipado de UI | Se puede usar | ✓ Mucho más rápido |
| Animaciones de layout (reflow) | Manual | ✓ AnimatePresence |
| Seek en un frame específico | ✓ tl.seek() | ✗ No existe |
| Línea de tiempo coreografiada | ✓ Funcionalidad principal | Posible, pero limitado |
| Rendimiento en el navegador | ✓ Excelente | ✓ Muy buena |
🎬 Demostración lado a lado
A la izquierda: timeline coreografiada (GSAP) — A termina, B comienza, C se superpone. A la derecha: tarjeta «reactiva» (estilo Framer Motion) — loop de hover/scale que no tiene sentido en un video renderizado, porque nadie va a hacer hover en un MP4.
✓ Determinista — mismo resultado en cualquier render
✗ Hover no existe en MP4 — este patrón no genera video
💡 La regla de oro
Si tu producto final es un archivo de video, usa GSAP. Si es una interfaz con la que el usuario va a interactuar, Framer Motion ahorra código.
🔬 Por qué GSAP es determinista y se basa en fotogramas
Remotion renderiza frames de forma headless: «congela» el tiempo en cada frame, toma una captura de pantalla y pasa al siguiente. Para que esto funcione, el estado visual debe depender al 100% del número del frame, nunca del reloj del sistema.
🧠 El problema con requestAnimationFrame
Las animaciones CSS y Framer Motion usan requestAnimationFrame — dependen del reloj real. Cuando Remotion renderiza el frame 60, no "espera 2 segundos reales"; salta directamente. Las animaciones CSS siempre estarían en t=0.
@keyframes fade { from { opacity:0 } to { opacity:1 } }
// ✓ GSAP + seek — va exactamente al frame correcto
tl.seek(frame / fps); // frame=60, fps=30 → seek(2.0)
✗ No determinista
- ✗CSS
animation— basada en clock - ✗Spring de Framer Motion: física variable
- ✗setTimeout/setInterval — timing impreciso
✓ Determinístico para Remotion
- ✓GSAP con
tl.seek() - ✓
interpolate(frame, [...])Remotion nativo - ✓Spring de Remotion (no de Framer)
✅ Cuándo Framer Motion sigue teniendo sentido
Framer Motion no es inferior: es diferente. Hay contextos en los que te ahorra días de trabajo. El secreto está en no confundir el producto final.
Prototipado rápido
Mostrar una idea de UI al cliente en horas. Framer Motion + shadcn = prototipo en una tarde.
Apps React con transiciones de ruta
AnimatePresence hace que la entrada y la salida de componentes sean triviales. Es imposible replicarlo con tanta sencillez usando GSAP.
Arrastrar y gestos
Dashboards arrastrables, carruseles con inercia, tableros kanban. Framer lo hace muy sencillo.
Video renderizado con Remotion
Aquí Framer Motion no funciona: sin seek(), la física de spring es indeterminística y el resultado final es impredecible.
💬 Cómo pedirle a Claude la herramienta adecuada
Claude conoce ambas bibliotecas, pero necesitas dejar explícito el contexto. Sin contexto, Claude puede generar código Framer Motion para un video de Remotion, y eso no va a funcionar.
✗ Prompt vago
"Anima estos cards al entrar en pantalla"
Claude puede usar CSS, Framer o GSAP: la suerte define el resultado.
✓ Prompt contextualizado
"Estoy usando Remotion 4 con GSAP. Anima estos cards en stagger de 0.2s, fade-up, usando tl.seek(frame/fps)"
Resultado garantizado y correcto.
💡 Plantilla de prompt para GSAP + Remotion
"Crea una composición de Remotion con GSAP. Usa tl.seek(frame/fps) para sincronizar. [describe la animación]. FPS: 30, duración: [Ns]."
📋 Resumen del módulo
Lo que aprendimos
- ✓GSAP y Framer sirven a paradigmas opuestos
- ✓El video renderizado requiere determinismo — GSAP + seek()
- ✓Framer Motion destaca en la creación de prototipos y en la UI interactiva
- ✓Las animaciones CSS son incompatibles con el renderizado headless
- ✓El contexto en el prompt garantiza que Claude elija la herramienta correcta
Siguiente módulo
Cuando el dato en sí es la animación. Bar races, diagramas de arquitectura y visualizaciones que Claude genera a partir de un CSV.