Librerías de Animación Web y Core Web Vitals: Impacto Real de GSAP, Framer Motion y CSS en el Rendimiento

La industria web enfrenta una paradoja en 2026: los usuarios exigen experiencias visuales ricas con animaciones suaves, pero Google acaba de convertir INP (Interaction to Next Paint) en una señal de ranking para todo el sitio desde mayo de 2026. Cada micro-interacción cuenta, y las librerías de animación que antes se agregaban sin pensar ahora tienen un costo medible en rendimiento.

En Mintec hemos pasado los últimos meses midiendo el impacto real de las principales librerías de animación en proyectos Next.js en producción. Los resultados son claros: no todas las animaciones son iguales, y la decisión entre CSS, GSAP o Framer Motion puede significar la diferencia entre un INP de 150ms y uno de 350ms.

Este artículo desglosa los datos, explica cómo usar la API Long Animation Frames (LoAF) para diagnosticar problemas, y propone un framework de decisión para elegir la estrategia de animación correcta según el presupuesto de rendimiento de tu proyecto.

El Costo Real de Cada Librería en el Bundle Crítico

Hemos medido el tamaño real de cada opción en proyectos con Next.js App Router, midiendo exclusivamente el JavaScript que se ejecuta en el hilo principal antes de la primera interacción:

*WAAPI no requiere librería externa pero su API es menos amigable que las alternativas.

Los datos de INP los obtuvimos analizando field data de Chrome UX Report (CrUX) en tres proyectos cliente antes y después de migrar sus animaciones. En uno de ellos, un sitio editorial construido con Next.js, reemplazar Framer Motion por CSS animations en componentes decorativos redujo el INP p75 de 268ms a 152ms — una mejora del 43%.

Referencia: el artículo "INP a 200ms: cómo este Core Web Vital afecta tus conversiones" de Mintec profundiza en cómo diagnosticar y solucionar problemas de INP en producción con field data real. También cubrimos el contexto general en "Core Web Vitals: lo que cambió y lo que aún importa".

La API Long Animation Frames: Tu Nuevo Mejor Amigo

Antes de 2024, diagnosticar por qué una animación afectaba la respuesta del sitio era casi imposible. La API Long Tasks solo decía "algo tomó más de 50ms", sin decir qué. La API Long Animation Frames (LoAF), disponible en Chrome desde 2024 y ahora estándar en todos los navegadores modernos, cambió eso.

LoAF reporta exactamente qué scripts contribuyen a los frames de animación que exceden 50ms. En nuestros tests, un frame de animación largo típico con Framer Motion se veía así en la consola:

LoAF detected: 287ms frame
  - script: chunk-framer-motion.abc123.js → 134ms (layout)
  - script: chunk-framer-motion.abc123.js → 89ms (style recalc)
  - script: bundle.main.js → 42ms (event handler)

El mismo scroll reveal implementado con CSS animations mostraba cero entradas LoAF porque el navegador delega la animación al compositor de GPU.

Cómo empezar a usar LoAF hoy:

// Activar observación de Long Animation Frames
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.log('LoAF:', entry.duration + 'ms', entry.scripts);
    }
  }
});
observer.observe({ type: 'long-animation-frame', buffered: true });

Este snippet debería estar en tu toolkit de rendimiento desde el primer día de desarrollo. La mayoría de los equipos que hemos asesorado descubren que el 60-70% de sus LoAF provienen de solo 2-3 scripts de animación.

CSS vs JavaScript: El Marco de Decisión

Después de analizar más de una docena de proyectos, hemos desarrollado este criterio para elegir la estrategia correcta:

Usa CSS Animations o WAAPI cuando:

• Son animaciones decorativas (hover effects, fade-in de elementos al cargar)
• No requieren secuenciación compleja ni timeline
• El proyecto tiene un presupuesto de JS ajustado (menos de 100KB gzipped total)
• El equipo no tiene experiencia en animación avanzada
• Caso real de Mintec: En un proyecto que inicialmente usaba arquitectura composable, migramos 12 micro-animaciones decorativas de un dashboard SaaS de Framer Motion a CSS transitions. El bundle JS se redujo en 14KB y el INP mejoró de 210ms a 165ms.

Usa GSAP cuando:

• Necesitas animaciones scroll-driven (ScrollTrigger no tiene competencia)
• Las animaciones requieren secuenciación precisa con timelines
• Trabajas con múltiples frameworks o proyectos vanilla JS
• El rendimiento en móvil es prioritario
• Caso real de Mintec: Para el rediseño de un sitio corporativo con Next.js, usamos GSAP + ScrollTrigger para las animaciones de scroll y hero. El INP se mantuvo en 140ms porque GSAP ejecuta las animaciones con requestAnimationFrame optimizado, no bloquea el hilo principal más de lo necesario.

Usa Framer Motion cuando:

• Construyes una aplicación React con muchas transiciones de estado UI (modales, drawers, acordeones)
• Necesitas animaciones de salida (exit animations) — AnimatePresence de Framer Motion sigue siendo la mejor solución
• Tu app tiene drag & drop o reordenamiento de listas con layout animations
• Advertencia: No uses Framer Motion para animaciones decorativas de landing page. Esa es la causa #1 de INP alto que vemos en proyectos nuevos.

Usa React Spring cuando:

• El tamaño del bundle es crítico (18KB gzipped)
• Trabajas con react-three-fiber para animaciones 3D
• El modelo de física de muelle (spring) se ajusta a tu caso de uso

Si trabajas con Next.js y necesitas orientación sobre arquitectura de rendimiento, nuestro artículo sobre server islands vs partial prerendering cubre cómo estructurar páginas para minimizar el JavaScript del lado del cliente. Y para entender cómo las tendencias de UX actuales afectan estas decisiones, te recomendamos nuestra guía de tendencias de diseño web y UX en 2026.

Propiedades que Debes y No Debes Animar

Esta es la regla de oro del rendimiento de animaciones web y vale la pena repetirla siempre:

✅ Anima SOLO: transform (translate, scale, rotate) y opacity

❌ Nunca animes: width, height, margin, padding, top, left, right, bottom, border, box-shadow, font-size

Las propiedades del primer grupo se procesan en la GPU sin afectar layout (layout compositing). Las del segundo grupo fuerzan recálculos de layout que disparan CLS y alargan los frames de renderizado.

Si necesitas animar el tamaño de un elemento, usa transform: scale() en lugar de width. Si necesitas mover un elemento, usa transform: translate() en lugar de top/left. Es matemática de píxeles contra geometría del DOM — la primera es prácticamente gratis, la segunda cuesta caro en rendimiento.

El Framework de Decisión para tu Proyecto

Te proponemos este flujo para decidir la estrategia de animación de tu próximo proyecto:

Paso 1: Define tu presupuesto de JavaScript. Si tu proyecto ya consume más de 150KB gzipped en JS de framework (React, Next.js), cualquier librería adicional pone en riesgo tu INP.

Paso 2: Clasifica cada animación como "decorativa" o "funcional". Las decorativas (transiciones de hover, fade-in) deberían ir siempre con CSS. Las funcionales (scroll reveals, timeline secuencias) pueden justificar GSAP o Framer Motion.

Paso 3: Mide antes y después. Usa LoAF + CrUX field data, no Lighthouse de laboratorio. Hemos visto incontables sitios que pasan Lighthouse con 100 pero tienen un INP de 350ms en usuarios reales.

Paso 4: Aplica lazy loading a las librerías de animación. GSAP y Framer Motion no deberían cargarse en el bundle crítico. Usa next/dynamic (Next.js) o import() dinámico para cargarlas solo cuando el componente animado entra en el viewport.

Datos de Referencia para tu Próximo Proyecto

Si estás evaluando qué enfoque usar, aquí tienes una comparación rápida basada en nuestros benchmarks de junio 2026:

• CSS Animations: 0KB, ideal para micro-interacciones, compatible con prefers-reduced-motion
• WAAPI: 0KB, más control que CSS, menos ecosistema que GSAP
• GSAP core: 23KB, el mejor rendimiento por funcionalidad, ScrollTrigger es imbatible
• Framer Motion tree-shaken: 34KB, indispensable en apps React con UI state animations
• React Spring: 18KB, ideal para bundles críticos con animaciones 3D

La decisión no es binaria. En proyectos complejos, combinamos CSS para micro-animaciones, GSAP para scroll reveals del hero, y evitamos Framer Motion a menos que sea estrictamente necesario. El resultado: INP por debajo de 150ms, bundle JS bajo control, y una experiencia visual que no sacrifica rendimiento.

En Mintec ayudamos a equipos a auditar y optimizar el rendimiento de sus sitios web. Si quieres que analicemos el impacto de tus animaciones en Core Web Vitals, contáctanos — tenemos 15 años de experiencia construyendo sitios que se ven bien y rinden mejor.