Las animaciones de scroll con CSS y las transiciones entre páginas están entre las 20 áreas de trabajo de Interop 2026, el acuerdo anual con el que Apple, Google, Microsoft, Mozilla e Igalia se comprometen a que ciertas funciones web se comporten igual en todos los navegadores. Se anunció el 12 de febrero de 2026. Para las marcas, es una buena noticia: el storytelling visual en la web, con escenas que avanzan al hacer scroll o páginas que se encadenan con suavidad, dependerá cada vez menos de librerías pesadas.
En resumen
- Interop 2026 fija 20 áreas prioritarias, entre ellas View Transitions y Scroll-driven Animations, según WebKit (12/02/2026).
- Las animaciones ligadas al scroll funcionan con CSS nativo, sin JavaScript, usando las funciones scroll() y view().
- Las transiciones entre páginas (cross-document) permiten animar el paso de una página a otra de la misma web.
- En Interop 2025, la puntuación conjunta subió de 25 a 95 y las transiciones dentro de una misma página ya quedaron compatibles entre navegadores, según Mozilla.
- Menos librerías significa webs más ligeras, pero la animación sigue necesitando dirección de arte.
Qué es Interop 2026 y qué incluye
Interop es una iniciativa en la que los principales motores de navegador acuerdan un conjunto de funciones y las prueban con los mismos tests para que funcionen igual en Chrome, Edge, Firefox y Safari. Es su quinto año consecutivo. Según Mozilla Hacks (12/02/2026), las 20 áreas se eligieron entre más de 150 propuestas.
La lista completa publicada por WebKit incluye, entre otras: Anchor Positioning, Container Style Queries, Dialog y Popover, Navigation API, Scroll-driven Animations, Scroll Snap, shape(), View Transitions, WebRTC y WebTransport. Además, hay cuatro áreas de investigación: accesibilidad, pruebas en móvil, JPEG XL y WebVTT (subtítulos).
¿Por qué importa que funcione igual en todos los navegadores?
Porque una animación que solo se ve bien en Chrome no sirve para una marca: parte de tu público navega con Safari en el iPhone. Mozilla recuerda que la puntuación global de Interop pasó de 25 a 95 durante 2025 y que funciones como las View Transitions dentro de una misma página ya son compatibles entre navegadores. Interop 2026 busca repetir ese efecto con las transiciones entre páginas y las animaciones de scroll.
Qué son las animaciones ligadas al scroll y las View Transitions
| Función | Qué hace | Ejemplo de uso narrativo |
|---|---|---|
| Scroll-driven Animations con scroll() | Vincula una animación a la posición de scroll de un contenedor | Una barra de progreso de lectura o un fondo que cambia de color mientras avanzas |
| Scroll-driven Animations con view() | Activa la animación cuando un elemento entra en pantalla | Fotos de un rodaje que aparecen y se desplazan al llegar a cada capítulo |
| View Transitions en la misma página | Anima el cambio entre estados de la interfaz | Una miniatura de vídeo que se amplía hasta ocupar la ficha del proyecto |
| View Transitions entre páginas | Anima la navegación de una página a otra de la misma web | Pasar del portfolio a un caso concreto sin el «salto» en blanco |
Según WebKit, las animaciones de scroll se basan en CSS y no requieren JavaScript. CSS es el lenguaje que define el aspecto de una web; JavaScript, el que añade lógica. Hacerlo en CSS suele ser más ligero y más fácil de mantener.
¿Adiós a las librerías de animación?
No del todo, pero sí para muchos casos habituales. Durante años, el scroll narrativo se ha resuelto con librerías de JavaScript que añaden peso y dependencias. Con CSS nativo compatible entre navegadores, efectos como aparecer al entrar en pantalla, barras de progreso o transiciones entre páginas pueden hacerse sin ellas.
Las librerías seguirán teniendo sentido para animaciones muy complejas o sincronizadas con vídeo. Y hay que tener en cuenta que Interop marca prioridades para 2026: hasta que una función esté disponible en todos los navegadores, conviene diseñar la web para que funcione bien también sin la animación.
Cómo aplicarlo en la web de tu marca
El scroll narrativo se parece mucho a montar un vídeo: hay ritmo, planos y un orden para contar algo. Nuestro enfoque, cuando pensamos una web con criterio audiovisual:
- Escribe primero la historia: qué debe entender el visitante en cada bloque, como si fuera un guion.
- Anima con intención: cada movimiento debe guiar la mirada hacia el mensaje o el producto, no decorar.
- Usa tu material audiovisual: fotos y fragmentos de vídeo de calidad son los que dan sentido a la transición.
- Mantén la coherencia con tu identidad visual y con el estilo de montaje de tus vídeos.
- Respeta la preferencia de movimiento reducido del sistema operativo para quien se marea con las animaciones.
- Prueba en Safari y en móvil, y comprueba que la página se entiende si la animación no se ejecuta.
Para un hotel, una bodega o un evento en Canarias, una página que avanza como un recorrido visual puede transmitir el lugar mejor que un bloque de texto con fotos sueltas.
Preguntas frecuentes
¿Qué es Interop 2026?
Es el acuerdo anual entre Apple, Google, Microsoft, Mozilla e Igalia para mejorar la compatibilidad de funciones web entre navegadores. En su edición de 2026, anunciada el 12 de febrero, fija 20 áreas prioritarias, como View Transitions, animaciones ligadas al scroll, Anchor Positioning o WebTransport, y cuatro áreas de investigación, entre ellas JPEG XL y accesibilidad.
¿Se pueden hacer animaciones de scroll solo con CSS?
Sí. Las Scroll-driven Animations permiten vincular una animación a la posición de scroll con la función scroll() o activarla cuando un elemento entra en pantalla con view(), sin JavaScript. Su inclusión en Interop 2026 busca que funcionen igual en todos los navegadores, así que conviene prever una versión correcta de la página sin animación.
¿Qué son las View Transitions?
Son una función web que anima el cambio entre dos estados de una página o entre dos páginas de la misma web. Evitan el salto brusco al navegar y permiten, por ejemplo, que una imagen del portfolio se amplíe hasta convertirse en la cabecera del proyecto. Las de una misma página ya son compatibles; las de entre páginas están en Interop 2026.
¿Las animaciones hacen más lenta una web?
Depende de cómo se hagan. Las animaciones nativas en CSS suelen ser más ligeras que las basadas en librerías de JavaScript, porque evitan descargar y ejecutar código adicional. Aun así, el peso real suele venir de imágenes y vídeos sin optimizar, así que conviene cuidar ambos aspectos y medir la velocidad antes y después.
Una web que se recorre como un vídeo
Las nuevas herramientas del navegador ponen la animación al alcance de cualquier web, pero lo que la hace memorable sigue siendo el material y el ritmo. En Orbit Media Lab producimos las piezas que dan vida a esas páginas, desde vídeos corporativos en Tenerife hasta publicidad CGI y FOOH, y como también desarrollamos webs pensamos cómo encajan en la navegación.
Si quieres que tu web cuente una historia en lugar de enseñar un catálogo, hablemos de tu proyecto.
Fuentes
- WebKit: Announcing Interop 2026 (12/02/2026)
- Mozilla Hacks: Launching Interop 2026 (12/02/2026)
