Fecha de publicación: 26 de febrero de 2026
Las animaciones impulsadas por el desplazamiento evolucionaron de implementaciones de JavaScript de subproceso principal inestables a experiencias fluidas, accesibles y fuera del subproceso principal con funciones modernas de CSS y IU, como las líneas de tiempo de desplazamiento y las líneas de tiempo de vista. Este cambio permite crear prototipos rápidos y animaciones de alto rendimiento, a la vez que permite a los equipos crear páginas de narración de desplazamiento pulidas, como se muestra en este artículo.
NRK y la narración de historias
NRK (Norwegian Broadcasting Corporation) es la emisora de servicio público de Noruega. El equipo detrás de la implementación que se describe en este artículo se llama Visuelle Historier en noruego, que se traduce aproximadamente como Historias visuales en inglés. El equipo trabaja con diseño, gráficos y desarrollo para proyectos editoriales de TV, radio y la Web, y desarrolla identidades visuales, gráficos de contenido, artículos de fondo y nuevos formatos de narración visual. El equipo también trabaja con el perfil de diseño y las submarcas de NRK, y crea herramientas y plantillas para facilitar la publicación de contenido de acuerdo con la identidad de marca de NRK.
Cómo usa NRK animaciones basadas en el desplazamiento
Las animaciones activadas y guiadas por el desplazamiento mejoran sus artículos de narración, ya que los hacen más interactivos, atractivos y memorables. Este enfoque es particularmente útil en las narrativas de no ficción en las que hay pocas imágenes o no hay ninguna disponible.
Estas animaciones ayudan a fortalecer o crear puntos dramáticos, impulsar la historia y desarrollar pequeñas narrativas visuales que se alinean con el texto o lo refuerzan. Dado que se basan en el desplazamiento, estas animaciones permiten al usuario controlar la progresión de la narrativa a través de su desplazamiento.
Mejora la experiencia del usuario
Las estadísticas de usuarios de NRK revelan que los lectores aprecian cómo estas animaciones guían su enfoque. Cuando se destacan textos o animaciones a medida que se desplazan, a los usuarios les resulta más fácil identificar los puntos clave y comprender los aspectos más importantes de la historia, especialmente cuando se desplazan rápidamente.
Además, animar gráficos puede simplificar la información compleja, lo que facilita a los usuarios comprender las relaciones y los cambios a lo largo del tiempo. Cuando se crea, se agrega o se destaca información de forma dinámica, NRK puede presentar contenido de una manera más pedagógica y atractiva.
Cómo crear un ambiente
Las animaciones pueden ser herramientas poderosas para establecer o mejorar el estado de ánimo de una historia. Cuando se ajustan el tiempo, la velocidad y el estilo de las animaciones, la NRK puede evocar emociones que coinciden con el tono de la narrativa.
Divide el texto y proporciona un alivio visual
NRK suele usar pequeñas ilustraciones animadas para dividir largos bloques de texto en forma de un simple elemento gráfico o una pequeña ilustración, lo que les brinda a los lectores una pausa momentánea de la narrativa. Muchos usuarios aprecian la variación y señalan que divide el texto y lo hace más fácil de entender. Sienten que proporciona una pausa bienvenida en la narración.
Respetar las necesidades de accesibilidad y las preferencias de los usuarios
Todos los ciudadanos de Noruega deben poder acceder a las páginas públicas de NRK. Por lo tanto, las páginas deben respetar la preferencia del usuario por reducir el movimiento. Todo el contenido de la página debe estar disponible para los usuarios que habilitaron este parámetro de configuración del navegador.
Cómo diseñar animaciones basadas en el desplazamiento
NRK optimizó el flujo de trabajo de diseño desarrollando e integrando una nueva herramienta de animación de desplazamiento directamente en su sistema de administración de contenido (CMS) Sanity. Desarrollada en colaboración entre los equipos que desarrollan y mantienen el sitio y las soluciones de CMS, esta herramienta permite a los diseñadores crear prototipos e implementar animaciones de desplazamiento con indicaciones visuales para las posiciones de inicio y finalización de un elemento animado, y la capacidad de obtener una vista previa de las animaciones en tiempo real. Esta innovación les brinda a los diseñadores un mayor control y acelera el proceso de diseño directamente dentro del CMS.
Animaciones basadas en el desplazamiento en el navegador
Animación basada en una historia
Este artículo sobre un hombre que permaneció muerto en su departamento durante nueve años tuvo que depender en gran medida de las ilustraciones debido a la falta de otros elementos visuales. Las ilustraciones se animaron mediante el desplazamiento para destacar la narrativa, como en la animación en la que cae la noche y las luces de un edificio de varios pisos se encienden de forma progresiva hasta que solo queda un departamento sin luz. La animación se creó con la herramienta interna de animación basada en desplazamiento de NRK.
Animación de fundido de texto
Este artículo comienza con una breve introducción, que refleja la secuencia de apertura de una película. Los textos concisos combinados con imágenes de pantalla completa se diseñaron para sugerir el contenido del artículo y generar expectativa para alentar a los lectores a profundizar en el artículo completo. La portada se diseñó para que se parezca a un póster de película, con animaciones basadas en el desplazamiento para reforzar esta sensación animando el texto hacia arriba y hacia afuera de forma fluida.
.article-section {
animation: fade-up linear;
animation-timeline: view();
animation-range: entry 100% exit 100%;
}
Tipografía animada con desplazamiento
Tipografía animada en el título de un artículo: Licencia por enfermedad.
Con la introducción de "Sjukt sjuke" (que se traduce aproximadamente como "Enfermedad enferma"), NRK quería atraer a los lectores a un artículo sobre el aumento de los porcentajes de licencias por enfermedad en Noruega. El título debía ser un elemento visual llamativo que les diera a los lectores una pista de que esta no es la historia aburrida y basada en números que podrían esperar. El equipo de NRK quería que el texto y las ilustraciones se relacionaran con los temas de la pieza, y para ello, usó tipografía y animaciones de desplazamiento. El artículo utiliza el nuevo perfil de diseño y fuente de NRK News.
<h1 aria-label="sjuke">
<span>s</span><span>j</span><span>u</span><span>k</span><span>e</span>
<h1>
h1 span {
display: inline-block;
}
if (window.matchMedia('print, (prefers-reduced-motion: reduce)').matches) {
return;
}
const heading = document.querySelector("h1");
const letters = heading.querySelectorAll("span");
const timeline = new ViewTimeline({ subject: heading });
const scales = [/**/];
const rotations = [/**/];
for ([index, el] of letters.entries()) {
el.animate(
{
scale: ["1", scales[index]],
rotate: ["0deg", rotations[index]]
},
{
timeline,
fill: "both",
rangeStart: "contain 30%",
rangeEnd: "contain 70%",
easing: "ease-out"
}
);
}
Cómo destacar elementos ajustados al desplazamiento
Los lectores que terminan un artículo suelen querer leer más sobre el mismo tema. En los artículos sobre jóvenes que abusan de sustancias en instituciones, NRK quería recomendar un solo artículo como la siguiente lectura y, al mismo tiempo, darles a los lectores la opción de leer otros si así lo deseaban. La solución fue una navegación desplazable implementada con animaciones de desplazamiento y de ajuste de desplazamiento. Las animaciones se aseguraron de que el elemento activo estuviera en foco, mientras que los elementos restantes se atenuaron.
for (let item of items) {
const timeline = new ViewTimeline({ subject: item, axis: "inline" });
const animation = new Animation(effect, timeline);
item.animate(
{
opacity: [0.3, 1, 0.3]
},
{ timeline, easing: "ease-in-out", fill: "both" }
);
animation.rangeStart = "cover calc(50% - 100px)";
animation.rangeEnd = "cover calc(50% + 100px)";
}
La animación de desplazamiento activa una animación normal.
En este artículo sobre el presupuesto nacional de Noruega, NRK buscó hacer que una historia basada en números, pesada y aburrida, fuera más accesible y personalizada. El objetivo era desglosar una cifra de presupuesto enorme e incomprensible y darle al lector un cálculo personal de en qué se gasta su dinero de impuestos. Cada subsección se enfocaba en un elemento específico del presupuesto nacional. La contribución total de impuestos del lector se simbolizó con una barra azul que se dividió para mostrar su contribución a estos artículos individuales. La transición se logró con una animación basada en el desplazamiento que activó los elementos individuales para que se animaran.
const timeline = new ViewTimeline({
subject: containerElement
});
// Setup scroll-driven animation
const scrollAnimation = containerElement.animate(
{
"--cover-color": ["blue", "lightblue"],
scale: ["1 0.2", "1 3"]
},
{
timeline,
easing: "cubic-bezier(1, 0, 0, 0)",
rangeStart: "cover 0%",
rangeEnd: "cover 50%"
}
);
// Wait for scroll-driven animation to complete
await scrollAnimation.finished;
scrollAnimation.cancel();
// Trigger time-driven animations
for (let [index, postElement] of postElements.entries()) {
const animation = postElement?.animate(
{ scale: ["1 3", "1 1"] },
{
duration: 200,
delay: index * 33,
easing: "ease-out",
fill: "backwards"
}
);
}
"Hacemos animaciones basadas en el desplazamiento desde hace mucho tiempo. Antes de que existiera la API de Web Animations, teníamos que usar eventos de desplazamiento, que luego se combinaban con la API de Intersection Observer. A menudo, esta era una tarea muy laboriosa, y ahora las APIs de Web Animations y Scroll-Driven Animations la hacen trivial": Helge Silset, desarrollador de frontend en NRK
NRK tiene muchos componentes web diferentes que se pueden conectar a uno de sus elementos personalizados, llamado ScrollAnimationDriver (<scroll-animation-driver>), que admite las siguientes animaciones:
- Capas con
[KeyframeEffects](https://developer.mozilla.org/docs/Web/API/KeyframeEffect) - Animaciones de Lottie
- mp4
- three.js
<canvas>
En el siguiente ejemplo, se usan capas con KeyframeEffects:
<scroll-animation-driver data-range-start='entry-crossing 50%' data-range-end='exit-crossing 50%'>
<layered-animation-effect>
<picture>
<source />
<img />
</picture>
<picture>
<source />
<img />
</picture>
<picture>
<source />
<img />
</picture>
</layered-animation-effect>
</scroll-animation-driver>
Implementación de JavaScript de NRK de su elemento personalizado <scroll-animation-driver>:
export default class ScrollAnimationDriver extends HTMLElement {
#timeline
connectedCallback() {
this.#timeline = new ViewTimeline({subject: this})
for (const child of this.children) {
for (const effect of child.effects ?? []) {
this.#setupAnimationEffect(effect)
}
}
}
#setupAnimationEffect(effect) {
const animation = new Animation(effect, this.#timeline)
animation.rangeStart = this.rangeStart
animation.rangeEnd = this.rangeEnd
if (this.prefersReducedMotion) {
animation.currentTime = CSS.percent(this.defaultProgress * 100)
} else {
animation.play()
}
}
}
export default class LayeredAnimationEffect extends HTMLElement {
get effects() {
return this.layers.flatMap(layer => toKeyframeEffects(layer))
}
}
Rendimiento del desplazamiento
NRK tenía una implementación de JavaScript de alto rendimiento antes de que se usaran animaciones impulsadas por el desplazamiento, pero ahora las animaciones impulsadas por el desplazamiento les permiten tener un rendimiento aún mejor sin tener que preocuparse por el bloqueo del desplazamiento, incluso en dispositivos de baja potencia.
- Duración de la tarea que no es de SDA: 1 ms
- Duración de la tarea de SDA: 0.16 ms
Para obtener más información sobre la diferencia en el rendimiento del desplazamiento entre las implementaciones de JavaScript y las animaciones impulsadas por desplazamiento, consulta el artículo A case study on scroll-driven animations performance, en el que se profundiza en el tema.
Consideraciones de accesibilidad y UX
La accesibilidad desempeña un papel importante en las páginas públicas de NRK, ya que deben ser accesibles para todos los ciudadanos de Noruega en muchas circunstancias. NRK se asegura de que se pueda acceder a las animaciones de desplazamiento de varias maneras:
- Respetar las preferencias del usuario para reducir el movimiento: Usa la consulta de medios
screen and (prefers-reduced-motion: no-preference)para aplicar la animación como una mejora progresiva. También es útil controlar los estilos de impresión al mismo tiempo. - Ten en cuenta la amplia variedad de dispositivos y la precisión variable de la entrada de desplazamiento: Es posible que algunos usuarios se desplacen en pasos (espacio o teclas arriba/abajo, navegación a puntos de referencia con un lector de pantalla) y no vean toda la animación. Asegúrate de no pasar por alto información crucial.
- Ten cuidado con las animaciones que muestran o ocultan contenido: Para los usuarios que dependen del zoom del sistema operativo (SO), puede ser difícil notar que aparecerá contenido oculto a medida que se desplazan. Evita que los usuarios tengan que buscarlo. Si es necesario ocultar o mostrar contenido, asegúrate de que sea coherente en cuanto a dónde aparece y desaparece.
- Evitar grandes cambios en el brillo o el contraste de la animación: Dado que las animaciones impulsadas por el desplazamiento dependen del control del usuario, los cambios abruptos de luminancia pueden aparecer como parpadeos, lo que puede provocar convulsiones en algunos usuarios.
@media (prefers-reduced-motion: no-preference) {
.article-image {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.article-image.visible {
opacity: 1;
}
}
Navegadores compatibles
Para obtener una compatibilidad más amplia con navegadores de ScrollTimeline y ViewTimeline, NRK usa un polyfill de código abierto, que tiene una comunidad activa que contribuye a él.
Actualmente, el polyfill se carga de forma condicional cuando ScrollTimeline no está disponible y usa una versión reducida del polyfill sin compatibilidad con CSS.
if (!('ScrollTimeline' in window)) {
await import('scroll-timeline.js')
}
Detección y manejo de la compatibilidad con navegadores en CSS:
@supports not (animation-timeline: view()) {
.article-section {
translate: 0 calc(-15vh * var(--fallback-progress));
opacity: var(--fallback-progress);
}
}
@supports (animation-timeline: view()) {
.article-section {
animation: --fade-up linear;
animation-timeline: view();
animation-range: entry 100% exit 100%;
}
}
En el ejemplo anterior para navegadores no compatibles, NRK usa una variable de CSS, --fallback-progress, como resguardo para controlar el cronograma de animación de las propiedades translate y opacity.
Luego, la variable CSS --fallback-progress se actualiza con un objeto de escucha de eventos scroll y requestAnimationFrame en JavaScript de la siguiente manera:
function updateProgress() {
const end = el.offsetTop + el.offsetHeight;
const start = end - window.innerHeight;
const scrollTop = document.scrollingElement.scrollTop;
const progress = (scrollTop - start) / (end - start);
document.body.style.setProperty('--fallback-progress', clamp(progress, 0, 1));
}
if (!CSS.supports("animation-timeline: view()")) {
document.addEventListener('scroll', () => {
if (!visible || updating) {
return;
}
window.requestAnimationFrame(() => {
updateProgress();
updating = false;
});
updating = true;
});
}
Recursos
- Casos de éxito de animaciones impulsadas por el desplazamiento
- Demostraciones: Animaciones impulsadas por el desplazamiento
- Anima elementos al desplazarse con animaciones basadas en el desplazamiento
- Codelab: Cómo comenzar a usar animaciones basadas en desplazamientos en CSS
- Extensión de Chrome: depurador de animaciones impulsadas por el desplazamiento
- Relleno de cronograma de desplazamiento
- ¿Quieres informar un error o una función nueva? Queremos conocer tu opinión.
Agradecemos especialmente a Hannah Van Opstal, Bramus y Andrew Kean Guan de Google, y a Ingrid Reime de NRK por sus valiosas contribuciones a este trabajo.