Stack web inmersivo en 2026: Lenis, GSAP, y qué dejar fuera

El stack web inmersivo es un conjunto pequeño de librerías de motion que maneja smooth scroll, animaciones ligadas al scroll y transiciones a nivel de componente para un sitio de marketing o una landing de producto. En 2026 el stack correcto es más pequeño que hace dos años. Webflow adquirió GSAP y en abril de 2025 liberó todos los plugins. Lenis se consolidó en un único paquete mantenido por Darkroom Engineering. Los navegadores basados en Chromium y Safari 18 ahora soportan nativamente las scroll-driven animations en CSS. El resultado: la mayoría de los sitios necesitan dos librerías más una feature CSS, no cinco librerías más una pipeline de build.

Abajo está el stack que enviamos en producción para páginas de marketing, landings de producto y sitios de case study. Elegimos por trabajo, no por marca. Los criterios son: peso del bundle (cada kB retrasa el LCP), compatibilidad con React 19 y Next.js 16 App Router, una señal de mantenimiento en 2026, un camino honesto para prefers-reduced-motion y coste de licencia cero.

Lo que medimos

• Peso del bundle. Todo lo que va al chunk principal se come el LCP. Contamos el tamaño gzipped sobre la superficie de import que usamos de verdad, no el número de portada de la home.
• React 19 + Next.js 16 App Router. Server Components por defecto. Client islands solo donde vive el motion.
• Señal de mantenimiento. Última release en seis meses, issues triadas, owner identificable.
• prefers-reduced-motion. La librería respeta la media query de fábrica, o hace trivial desactivar la animación. Una animación que ignora los trastornos vestibulares falla el suelo de accesibilidad.
• Coste. Gratis para uso comercial, sin tier Club, sin riesgo de auditoría.

1. Lenis (smooth scroll)

Lenis es una librería de smooth scroll de 3 kB de Darkroom Engineering, el equipo antes conocido como Studio Freight. Secuestra el scroll nativo, aplica un easing sobre la posición de scroll y expone un callback de tick al que otras librerías se enganchan. La línea 1.3.x es el target de producción actual, con lenis/react como adapter React. El paquete @studio-freight/react-lenis se retiró en la consolidación.

Qué resuelve. La sensación entrecortada y anclada a la página del scroll nativo en sitios de marketing largos. Lenis convierte el scroll en un valor animado continuo, condición previa de cualquier efecto parallax, transición sticky o adorno ligado a la velocidad de scroll que se ve en sitios de award.

Dónde se queda corto. Lenis toma posesión del loop de scroll. El anchor scrolling, el bounce nativo de overscroll en iOS y las herramientas de accesibilidad que dependen del comportamiento nativo del scroll necesitan manejo extra. En un sitio de documentación o un dashboard SaaS, Lenis es peso. Sáltalo.

Para quién. Sitios de marketing, landings de producto y páginas de case study donde el scroll mismo es parte de la marca.

2. GSAP core (motor de animación)

GSAP es el motor de animación JavaScript canónico. Su core pesa unos 27 kB gzipped, está optimizado alrededor de requestAnimationFrame, y su API de timeline no tiene equivalente real en otra librería. El 30 de abril de 2025, Webflow (que adquirió GSAP a finales de 2024) liberó toda la librería, incluidos todos los plugins Club antes de pago, bajo una licencia estándar que cubre uso comercial sin coste. SplitText, MorphSVG, MotionPath, DrawSVG y ScrollSmoother ahora son gratuitos. El equipo original de GreenSock mantiene GSAP a tiempo completo dentro de Webflow.

Qué resuelve. Animaciones secuenciadas y de buen rendimiento sobre propiedades arbitrarias (CSS, SVG, canvas, three.js). Cuando necesitas una timeline con doce pasos que se pausa en hover y se invierte en click, GSAP es la única opción madura que lo hace sin perder frames.

Dónde se queda corto. API imperativa. La animación la escribes, no la declaras. Para entradas y salidas a nivel de componente, Motion (el sucesor React-friendly de Framer Motion) es más ergonómico.

Para quién. Cualquier sitio con más de una sección con scroll-trigger, o un hero que pide más que una keyframe CSS.

3. GSAP ScrollTrigger (posiciones ligadas al scroll)

ScrollTrigger es el plugin de GSAP que liga una timeline a una posición de scroll, a una intersección con el viewport o a un tick de Lenis. Misma licencia que el core (gratis). Es la parte del stack que hace las cuentas: fija este elemento de 200 px a 800 px de scroll, scrubea esta timeline mientras el usuario pasa, dispara este callback cuando el trigger entra en viewport.

Qué resuelve. La lógica posicional de las secuencias scroll-driven. Pinning, scrubbing, snapping, batching, parallax. La mayoría de estos casos en 2026 los haces en CSS puro para los simples (ver siguiente sección), pero ScrollTrigger maneja lo que CSS no: timelines que atraviesan varias secciones, lecturas de velocidad de scroll, callbacks que disparan JavaScript en un punto de scroll.

Dónde se queda corto. La integración con Lenis está bien documentada pero es frágil. Sincronizas el scroll de Lenis con ScrollTrigger.update, pones el raf de Lenis en el ticker de GSAP y desactivas el lag smoothing de GSAP. Falla uno de los tres y el scroll se desacopla de la animación. El patrón está resuelto, pero es deuda de configuración, no magia.

Para quién. Cualquier sitio que pinche, scrubee o secuencie sobre scroll. Si la respuesta es "solo necesitamos un fade-in al entrar en viewport", usa CSS.

4. Scroll-driven animations en CSS (nativo)

Desde Chrome 115 (2023) y Safari 18 (2024), CSS soporta animation-timeline: scroll() y animation-timeline: view(). Corren en el thread del compositor, envían cero JavaScript y degradan con elegancia donde no hay soporte. La guía de MDN cubre la sintaxis completa. Firefox sigue pidiendo un flag, pero Firefox hoy está por debajo del 3% del tráfico global en la mayoría de audiencias B2B SaaS.

Qué resuelve. Fade al entrar, fondos parallax, barras de progreso de lectura, transiciones de sección sticky, cualquier cosa donde la animación sea función de la posición de scroll o de la visibilidad del elemento en el viewport. Con @supports (animation-timeline: view()) envías la versión CSS y mantienes un fallback JavaScript solo para Firefox.

Dónde se queda corto. Sin API de callback. No lees velocidad de scroll, no disparas JavaScript arbitrario en un punto de scroll, no corres una timeline que afecte a tres elementos a distintas velocidades desde el mismo trigger. Para eso, ScrollTrigger.

Para quién. Cada sitio, para los casos que encajan. Usado como baseline, el CSS nativo quita entre 30 y 90 kB de JavaScript de la página marketing media.

5. Motion (antes Framer Motion)

Motion (el proyecto antes publicado como framer-motion) es la librería de animación React-native para transiciones a nivel de componente, layout animations, animaciones de salida y gestos. Unos 30 kB gzipped con layout animations y AnimatePresence incluidos. Es declarativa: escribes animate={{ x: 100 }} sobre un componente, la librería hace el resto.

Qué resuelve. Animación de UI. Modales que entran y salen limpios, transiciones de layout cuando los items se reordenan, drag and drop, animaciones de lista. Los casos en los que de otro modo recurrirías a estado React más clases CSS más setTimeout.

Dónde se queda corto. Animación ligada al scroll a gran escala. Con 60+ elementos animados en la misma página o una timeline de scroll de 15 pasos, Motion pierde frames porque cada tick de animación pasa por el ciclo de vida de React. GSAP gana esos casos por arquitectura.

Para quién. Apps SaaS con transiciones de layout, sitios de marketing que necesitan unos pocos modales elegantes o micro-interacciones en hover. Empareja con GSAP si la misma página también ejecuta una secuencia de scroll pesada.

6. View Transitions API (transiciones de página nativas)

API nativa del navegador para animar entre dos estados del DOM, o entre dos páginas con soporte cross-document llegado a Chrome y Safari durante 2025. Coste de librería cero, integración completa con el pipeline de renderizado.

Qué resuelve. Transiciones página a página en sitios multi-página sin un router que maneje un shadow DOM. Las View Transitions cross-document quitan la última razón técnica para enviar un router client-side en un sitio de contenido.

Dónde se queda corto. El soporte en Firefox sigue irregular, y la API pide limpieza cuidadosa cuando el estado cambia a mitad de transición. No sustituye a la animación de layout dentro de una sola página.

Para quién. Sitios de contenido y páginas de marketing donde la marca gana con la continuidad entre rutas.

La comparación

ToolPeso (gzip)TrabajoCosteLenis~3 kBLoop de smooth scrollGratis (MIT)GSAP core~27 kBTimeline animationGratis (desde abr 2025)ScrollTrigger~12 kBCálculo scroll-boundGratis (desde abr 2025)Scroll-driven CSS0 kB JSEfectos de scroll en compositorNativoMotion~30 kBAnimación de componente ReactGratis (MIT)View Transitions0 kB JSMorph página a páginaNativo

Cómo elegir

El árbol de decisión que seguimos en cada proyecto:

• Dashboard SaaS o app de producto. Solo Motion, para transiciones de layout y entrada de modales. Sin Lenis, porque interfiere con las affordances nativas de scroll dentro de tablas de datos y dashboards. Scroll-driven CSS para cualquier efecto de scroll decorativo.
• Página de marketing con una o dos secciones animadas. Solo scroll-driven CSS. Salta el stack JavaScript por completo.
• Página de marketing o landing de producto con parallax, secciones pinned o storytelling scroll-driven. Lenis y GSAP ScrollTrigger. Mantén Motion fuera si no tienes también transiciones de layout.
• Página de case study o sitio editorial long-form. Stack completo: Lenis, GSAP, ScrollTrigger, scroll-driven CSS como baseline, Motion para las piezas a nivel de componente. Es el caso donde el presupuesto se paga solo.
• Sitio de documentación o de contenido. Solo CSS. Lenis rompe el scroll con anchor link y la navegación por screen reader. Todo lo demás es deuda decorativa.

El suelo de accesibilidad

Cada animación de este stack debe respetar prefers-reduced-motion. GSAP trae gsap.matchMedia(), que te permite acotar un setup ScrollTrigger entero a una media query y revertirlo automáticamente cuando la query deja de cumplirse. Motion respeta la preferencia del usuario vía el hook useReducedMotion. Las scroll-driven animations en CSS van dentro de bloques @media (prefers-reduced-motion: no-preference). Lenis expone flags que desactivas para usuarios con reduced-motion, así el scroll nativo vuelve a tomar el control.

La animación que ignora los trastornos vestibulares no es un trade-off de feature, es un fallo de accesibilidad. Envía primero la variante reduced-motion; la animada es mejora.