El motion web con GSAP construye transiciones de página, revelados en scroll y estados hover sin sacrificar los Core Web Vitals: LCP ≤ 2,5 s, INP ≤ 200 ms y CLS ≤ 0,1. Nosotros animamos con esos umbrales como meta fija y con respeto a prefers-reduced-motion, tal como recoge WCAG 2.3.3: la animación acompaña la experiencia, no la condiciona.
Qué construimos con GSAP
Tres bloques cubren el 90% de lo que una agencia nos pide. Primero, transiciones de página: el cambio de vista se siente continuo sin bloquear la navegación ni el back del navegador. Segundo, scroll: revelados de secciones, parallax contenido y secuencias donde un elemento avanza con la lectura. Tercero, hover y microinteracciones: botones, tarjetas y menús que responden al puntero con timing corto y easing consistente.
Todo eso se orquesta con timelines de GSAP y disparadores de scroll, sobre elementos que ya existen en el layout. No maquetamos dos veces ni escondemos el contenido detrás de la animación: si el motion no carga, la página sigue siendo legible y usable. Cuando el diseño llega de Figma, las notas de motion del handoff se traducen en specs de animación dentro de la integración de Figma a WordPress, no en improvisación dentro del tema.
Rendimiento: los umbrales que respetamos
Medimos contra los umbrales de Core Web Vitals en cada entrega. No son números decorativos: definen cómo animamos.
| Métrica | Umbral | Cómo lo cuidamos |
|---|---|---|
| LCP | ≤ 2,5 s | El hero no espera animaciones de entrada; los medios fuera del primer viewport se cargan bajo demanda. |
| INP | ≤ 200 ms | Animamos transform y opacity; nada que mantenga ocupado el hilo principal en interacción. |
| CLS | ≤ 0,1 | Espacio reservado para medios animados; sin saltos de layout al entrar o salir elementos. |
Reduced motion y accesibilidad
Cada proyecto incluye la preferencia del sistema: con prefers-reduced-motion, acortamos o desactivamos las animaciones no esenciales y dejamos solo cambios de estado mínimos. Es lo que pide WCAG 2.3.3 respecto a la animación derivada de interacciones, y es comportamiento de base en MDN para la media query. El texto, el foco y el contenido nunca dependen de que algo se mueva; el motion es una capa, no el mecanismo de comprensión. Si tu cliente audita accesibilidad, esta capa ya está contemplada desde el diseño del sistema de animación.
Cómo lo entregamos a tu agencia
Operamos como tu equipo de desarrollo: defines el motion en el diseño, nosotros lo construimos y lo documentamos en el servicio de motion web con GSAP. Entregamos el código dentro del tema, con notas de uso para quien edite el contenido después. Si el proyecto es white label, sale bajo tu marca; si buscas referencias de acabado, revisa el caso Mujer Raíz o el resto de nuestro trabajo en español.
Lo importante
- Construimos transiciones, scroll y hover; la animación nunca es requisito para entender o usar la página.
- Los umbrales CWV —LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1— se revisan en cada entrega, no después del lanzamiento.
- prefers-reduced-motion y WCAG 2.3.3 están contemplados: sin capa de motion accesible, el proyecto no cierra.
Preguntas frecuentes
¿GSAP afecta el posicionamiento orgánico?
La animación no afecta si el contenido está en el HTML desde el inicio y las métricas de rendimiento se mantienen dentro de sus umbrales. El riesgo no es GSAP: es animar el contenido principal de forma que tarda en pintar o que salta al entrar en pantalla.
¿Cuánto pesa añadir motion a un sitio ya construido?
Depende de cómo esté armado el tema. Si los componentes están limpios y con clases estables, se integra sobre la estructura existente. Si el layout está construido con atajos, primero reordenamos el DOM para animar sin romper el layout ni empeorar CLS.
¿Qué pasa si el visitante tiene activada la reducción de movimiento?
Se sirve la versión mínima: desaparecen los reveals largos y las transiciones de página, y queda solo feedback visual breve donde hace falta. La página mantiene toda su información y su navegación completa; solo se apaga la capa cinematográfica.
¿Pueden animar cualquier idea que traigamos de diseño?
Podemos animar mucho, pero primero la contrastamos con los umbrales. Si una animación compromete INP o retrasa LCP, proponemos una alternativa con el mismo efecto visual y otro mecanismo. El criterio no es “no se puede”, sino “así se puede sin romper el rendimiento”.
¿Cómo se mantiene el motion después de la entrega?
Documentamos disparadores, duraciones y jerarquía de animaciones para que tu equipo o el cliente no rompan nada al editar contenido. Los cambios grandes de layout se revisan con nosotros: mover una sección puede cambiar el orden de los disparadores de scroll.