Laboratorio 03 · Movimiento

GSAP Motion Lab

Una animación útil orienta la atención y explica una relación. Edita y ejecuta el código para observar cómo distancia, duración, easing y secuencia cambian la sensación.

Moverto, from y fromTo

Afinarduration y easing

Secuenciartimelines

Distribuirstagger

Respondereventos y scroll

Cuidaraccesibilidad y rendimiento

gsap.to(".motion-orb", { x: 210, rotation: 180, duration: 1.2, ease: "power2.out", stagger: 0.12 });

Editor activo · Ctrl/⌘ + Enter para ejecutar

Edita el código y presiona Ejecutar.

Guía de consulta

Patrones GSAP esenciales

Cada ejemplo indica qué hace y cuándo conviene usarlo. Puedes copiarlo al laboratorio y modificarlo.

gsap.to(".item", { x: 120 })Animar hacia

Cuando conoces el estado final.

gsap.from(".item", { opacity: 0 })Animar desde

Para entradas cuyo DOM ya está en estado final.

gsap.fromTo(target, from, to)Control total

Fijar inicio y final explícitamente.

duration: 0.8Tiempo

Controlar velocidad y jerarquía.

ease: "power2.out"Sensación

Desacelerar naturalmente al llegar.

delay: 0.2Retrasar

Coordinar con otra acción.

stagger: 0.12Escalonar

Revelar una colección en orden.

gsap.timeline()Secuenciar

Crear coreografías controlables.

timeline.pause()Pausar

Dar control a la persona usuaria.

timeline.reverse()Revertir

Cerrar con la animación inversa.

gsap.context(...)Acotar

Limitar selectores dentro de React.

context.revert()Limpiar

Evitar animaciones huérfanas al desmontar.

Ruta completa

Explicaciones y prácticas

0 de 12 prácticas

to · from · fromTo

Definir un cambio

Una animación describe cómo cambia una propiedad entre estados. Usa transformaciones como x, y, scale y rotation porque suelen ser más eficientes que modificar layout.

gsap.to(".card", { x: 160, duration: 1 });

duration · delay · ease

Diseñar la sensación

Duración y easing modifican cómo se percibe el mismo desplazamiento. Un movimiento rápido puede orientar; uno elástico puede expresar juego.

gsap.to(".card", {
  y: 80, duration: .8, ease: "power2.out"
});

timeline

Coordinar una historia

Una timeline relaciona acciones en el tiempo. Es preferible a coordinar múltiples retrasos independientes porque conserva una secuencia controlable.

const tl = gsap.timeline();
tl.to(".title", { y: 0 })
  .to(".card", { opacity: 1 });

stagger

Distribuir atención

Stagger aplica una animación a varios elementos con una separación temporal. La secuencia puede revelar orden, jerarquía o relación.

gsap.from(".item", {
  y: 24, opacity: 0, stagger: .12
});

eventos · ScrollTrigger

Responder al usuario

El movimiento puede responder a una acción, pero no debe bloquear el contenido. Los efectos de scroll requieren inicio, fin y comportamiento claramente definidos.

button.addEventListener("click", () => {
  gsap.to(".panel", { scale: 1 });
});

context · cleanup · reduced motion

Mover con responsabilidad

En React, limpia animaciones al desmontar componentes. Respeta prefers-reduced-motion y evita animar grandes superficies o propiedades costosas sin necesidad.

const ctx = gsap.context(() => { /* motion */ });
return () => ctx.revert();

Antes de continuar

Lo importante no es acertar a la primera

Predice antes de ejecutar.
Cambia una cosa a la vez.
Explica por qué cambió el resultado.