GSAP como director temporal: tweens, timelines, easing y stagger en 3D
Aprende a usar `gsap.to()`, `gsap.from()`, `gsap.set()` y `timeline()` para animar objetos 3D con intención. La meta no es mover por mover, sino secuenciar entradas, énfasis y respiración visual en una escena R3F.
Una escena 3D empieza a parecer profesional cuando el tiempo deja de estar improvisado. GSAP no solo anima propiedades: organiza intención. Decide qué entra primero, qué se enfatiza, cuánto tarda cada gesto y cómo se relacionan unas capas con otras.
En 3D eso importa el doble. Si mueves cámara, objeto, luces y materiales sin una gramática temporal clara, la escena se siente caótica aunque el modelado sea bueno. El `timeline` convierte esa suma de impulsos en una secuencia dirigida.
En esta lección verás la función real de `gsap.to()`, `gsap.from()` y `gsap.set()`, y por qué `ease` y `stagger` no son maquillaje, sino parte de la percepción física y del ritmo visual.
La meta práctica es componer una microcoreografía clara para un objeto 3D: entrada, énfasis, asentamiento y repetición controlada.
- No todos los movimientos se describen igual. El método cambia la intención.
- `gsap.to()` mueve un valor desde su estado actual hasta el destino indicado. Es la opción más natural cuando el objeto ya existe en escena y quieres dirigirlo a un nuevo estado visible.
- `gsap.from()` es muy útil para entradas y revelados: defines el punto de partida y dejas que el objeto vuelva a su estado base. `gsap.set()` no anima: prepara el escenario. Por eso suele usarse para colocar la pieza en su pose de salida antes de empezar un timeline.
- Un timeline no es comodidad sintáctica; es estructura narrativa.
- Cuando cada propiedad vive en una llamada separada, el conjunto es difícil de leer, sincronizar o ajustar. Un `timeline` te permite encadenar movimientos, superponer acciones con etiquetas de tiempo y revisar la escena como una partitura.
Qué hace cada tween y cuándo usarlo
No todos los movimientos se describen igual. El método cambia la intención.
`gsap.to()` mueve un valor desde su estado actual hasta el destino indicado. Es la opción más natural cuando el objeto ya existe en escena y quieres dirigirlo a un nuevo estado visible.
`gsap.from()` es muy útil para entradas y revelados: defines el punto de partida y dejas que el objeto vuelva a su estado base. `gsap.set()` no anima: prepara el escenario. Por eso suele usarse para colocar la pieza en su pose de salida antes de empezar un timeline.
El timeline como director de escena
Un timeline no es comodidad sintáctica; es estructura narrativa.
Cuando cada propiedad vive en una llamada separada, el conjunto es difícil de leer, sincronizar o ajustar. Un `timeline` te permite encadenar movimientos, superponer acciones con etiquetas de tiempo y revisar la escena como una partitura.
Esto es especialmente importante en 3D porque muchas transformaciones deben convivir: posición, rotación, escala, intensidad de una luz o entrada de textos DOM superpuestos.
- Usa `defaults` para mantener consistencia de duración y easing.
- Usa `"<"` para empezar una animación junto a la anterior.
- Usa `">"` o desplazamientos relativos cuando quieras respiración entre beats.
- Piensa el timeline en términos de capítulos: entrada, foco, salida, loop.
Easing: la física percibida de tu escena
Un mal easing puede arruinar una buena composición.
El `ease` controla cómo cambia la velocidad. En una demo de producto, `power2.out` o `power3.out` suelen dar entradas limpias; `expo.out` aporta sensación premium; `none` tiene sentido cuando el movimiento debe seguir una velocidad constante, por ejemplo en trayectorias ligadas al scroll.
Usar un easing equivocado produce sensación de juguete barato o animación artificial. El easing no es decorativo: transmite peso, intención y materialidad.
Stagger: repartir el tiempo para que la escena respire
El stagger convierte un bloque repetido en una secuencia legible.
Cuando varios objetos comparten función visual, el `stagger` evita que todos reaccionen a la vez. En una fila de partículas, esferas o tarjetas 3D, esa diferencia temporal crea lectura, ritmo y profundidad percibida.
En 3D conviene usarlo con sutileza. Un stagger excesivo puede romper cohesión. El objetivo no es hacer ruido: es escalonar atención.
Cómo integrar GSAP en R3F sin pelearte con React
La clave está en animar refs, no estado React.
Las transformaciones que ocurren muchas veces por segundo no deben vivir en `useState`. En R3F lo habitual es apuntar a objetos Three.js con `useRef` y dejar que GSAP anime sus propiedades imperativas. Si ese patrón aún no lo tienes sólido, repasa <a href="/curso/react/leccion/react-useref-y-dom-medio/">useRef en React</a> antes de complicar la escena.
React organiza la escena; GSAP dirige su evolución temporal. Cuando mezclas ambos roles correctamente, el código sigue siendo mantenible. Cuando no, aparecen re-renders innecesarios, dependencias raras y bugs de sincronización. Esa frontera encaja muy bien con la mentalidad de <a href="/curso/react/leccion/react-useeffect-ciclo-vida-medio/">useEffect y sincronización externa</a>.
- Usa `useRef` para mallas, grupos y luces que deban animarse.
- Inicializa `gsap.timeline()` dentro de `useEffect` o `useGSAP`.
- Limpia timelines si el componente puede desmontarse.
- No conviertas cada frame en una actualización de estado React.
