Scrollytelling: contar una historia con el scroll sin marear

Hay una sensación muy concreta que buscamos cuando diseñamos una pieza de scrollytelling: que la persona deje de pensar en que está haciendo scroll. Que el dedo baje casi solo porque quiere ver qué pasa después, como quien pasa las páginas de un libro ilustrado. Cuando eso ocurre, el scroll deja de ser una forma de navegar y se convierte en el hilo de la historia.

También conocemos la sensación contraria, porque todos la hemos sufrido: páginas donde el scroll parece secuestrado, donde mueves la rueda un milímetro y la pantalla da un salto, donde los textos aparecen tan despacio que acabas buscando la barra lateral para huir. El scrollytelling tiene fama de espectacular y también de mareante, y las dos famas son merecidas.

Esta guía va de cómo quedarse con lo primero: qué es exactamente, cuándo tiene sentido, cómo se escribe el guion, qué patrones funcionan y cómo se construye hoy con CSS y un poco de JavaScript, sin olvidar a quien prefiere una página quieta.

01Qué es el scrollytelling y cuándo merece la pena

El término combina scroll y storytelling: contar una historia en la que el desplazamiento vertical hace avanzar la narración. Se popularizó en el periodismo digital a partir de reportajes como «Snow Fall», publicado por The New York Times en 2012, y hoy se usa en webs de producto, presentaciones de marca, memorias anuales, proyectos inmobiliarios y museos.

Lo que lo distingue de una página larga con animaciones es que hay una secuencia con intención: cada paso del scroll revela algo que cambia lo que entendemos de lo anterior. Un edificio que se construye planta a planta. Un producto que se desmonta para enseñar su interior. Un mapa que se va llenando de puntos a medida que se cuenta la expansión de una empresa.

Cuándo encaja

• →Cuando hay una transformación que contar: antes y después, proceso, evolución, crecimiento.
• →Cuando hay un objeto o un espacio que se entiende mejor recorriéndolo: un producto, una vivienda, un stand.
• →Cuando hay datos que ganan significado al construirse paso a paso.
• →Cuando la página es un momento especial de la marca: un lanzamiento, un aniversario, una campaña.

Cuándo es mejor otra cosa

En páginas de servicio, fichas de producto o cualquier contenido que la gente consulta con prisa, una estructura clara y escaneable sirve mejor. El scrollytelling pide tiempo y atención; tiene sentido cuando la historia los merece y la persona ha venido a dárselos.

02El guion antes que la animación

Lo tentador es empezar por los efectos. En el estudio empezamos por un guion escrito, como si fuera un pequeño documental, y solo después decidimos qué se mueve.

Un proceso que nos funciona:

1. 01Escribe la historia en una frase. «Cómo una nave industrial de 1970 se convierte en un espacio de coworking.» Si no cabe en una frase, la pieza todavía no está clara.
2. 02Divide la historia en escenas. Cinco a diez momentos, cada uno con una sola idea. Una escena es lo que cabe en una pantalla mientras la imagen principal está fija.
3. 03Define el texto de cada escena. Breve: entre 20 y 60 palabras. El texto guía; la imagen cuenta.
4. 04Decide qué cambia entre escenas. Una capa que aparece, una cifra que crece, una cámara que se acerca. Una transformación principal por escena.
5. 05Haz un storyboard. Bocetos simples de cada escena en móvil y en escritorio. Es el momento de detectar escenas que sobran.
6. 06Prototipa el ritmo. Antes de pulir nada, monta un prototipo tosco para sentir cuánto scroll necesita cada escena.

Este último paso es el que más cambia el resultado. Una escena que en el storyboard parecía perfecta puede necesitar el doble de recorrido para leerse con calma, o la mitad para no aburrir.

03Patrones de scrollytelling que funcionan

La mayoría de piezas se construyen combinando unos pocos patrones. Conocerlos ayuda a elegir el adecuado para cada escena.

El patrón más robusto, y por el que solemos empezar, es la escena fija con texto que pasa. Se construye con position: sticky, funciona en todos los navegadores, se adapta bien al móvil y, si las animaciones no se ejecutan, el contenido sigue leyéndose perfectamente.

El desplazamiento horizontal es el que más cuidado pide: convierte un gesto vertical en movimiento lateral y puede desorientar. Si se usa, mejor en tramos cortos y con una señal visual clara de que hay más contenido a la derecha.

04Cómo se construye: CSS moderno primero

Hasta hace poco, casi todo el scrollytelling dependía de JavaScript. Hoy una buena parte se puede resolver con CSS, lo que suele traducirse en animaciones más fluidas y menos código.

Sticky para las escenas

La base es un contenedor alto con un elemento fijo dentro:

.escena {
  height: 300vh; /* recorrido de la escena */
}
.escena__visual {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
}

La unidad svh (small viewport height) evita los saltos que provoca en móvil la barra del navegador al aparecer y desaparecer.

Animaciones vinculadas al scroll

Las scroll-driven animations permiten atar una animación CSS al avance del scroll, sin JavaScript. En el momento de escribir esta guía las soportan Chrome, Edge y Safari, y Firefox las tiene en desarrollo; por eso las aplicamos como mejora progresiva, dentro de @supports:

@supports (animation-timeline: view()) {
  .revela {
    animation: aparecer linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
  }
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: none; }
}

view() vincula la animación a la posición del elemento en pantalla, y animation-range define en qué tramo ocurre. Animar solo opacity y transform mantiene el trabajo en la GPU y evita tirones. La documentación de referencia está en MDN.

Cuándo recurrir a JavaScript

Para coreografías con muchos elementos sincronizados, secuencias de fotogramas o lógica compleja, librerías como GSAP con ScrollTrigger siguen siendo muy útiles. Para detectar cuándo una escena entra en pantalla y cambiar de estado, la API Intersection Observer es ligera y precisa. Lo que conviene evitar es escuchar el evento scroll y recalcular posiciones en cada píxel: es la receta clásica de las páginas que se arrastran. Y si la pieza incluye ilustraciones animadas, en la guía de Lottie, Rive y animación en la web contamos cómo integrarlas sin que pesen.

05Ritmo, control y respeto por quien lee

El mareo en el scrollytelling casi nunca viene de la animación en sí, sino de la pérdida de control. Estas son las reglas que aplicamos para que la experiencia sea placentera.

El scroll es de quien lee

La velocidad de la página la marca la persona. Eso significa no interceptar la rueda del ratón ni el gesto del pulgar, no forzar saltos automáticos entre secciones y no bloquear el avance hasta que termine una animación. Si alguien quiere ir rápido, puede; si quiere volver atrás, la historia retrocede con él. El scroll snapping de CSS puede ayudar en galerías, pero en una narración larga suele sentirse como un freno.

Orientación constante

En piezas largas, una pequeña barra de progreso o un índice de capítulos discreto ayuda a saber dónde se está y cuánto queda. Y siempre conviene que el usuario pueda saltarse la pieza: un enlace al contenido siguiente o un resumen al principio para quien solo quiere la información.

Movimiento con medida

El movimiento grande y rápido, sobre todo el que ocupa toda la pantalla (zooms, rotaciones, fondos que se desplazan a distinta velocidad), puede provocar mareo a personas con trastornos vestibulares. Por eso en nuestros proyectos los desplazamientos son contenidos, las transiciones duran lo justo y evitamos combinar varias capas en movimiento a la vez. Los principios de duración y curvas de aceleración que explicamos en animación en UI se aplican también aquí.

06Accesibilidad: una versión quieta igual de completa

El sistema operativo permite a cada persona pedir menos movimiento, y la web puede escuchar esa preferencia con la consulta prefers-reduced-motion. Las pautas WCAG 2.2 recogen esta idea en el criterio 2.3.3 (Animación desde interacciones) y piden, en el 2.2.2, que todo movimiento automático que dure más de cinco segundos se pueda pausar.

@media (prefers-reduced-motion: reduce) {
  .revela {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

Lo importante es que la versión reducida no sea una versión pobre: los textos aparecen todos, las imágenes muestran su estado final o su estado más explicativo, y la historia se entiende igual. Además:

• →Todo el texto vive en el HTML, nunca dentro de imágenes o de un canvas.
• →El orden del contenido en el código sigue el orden de la historia, para que un lector de pantalla la cuente bien.
• →Los textos sobre imagen mantienen un contraste mínimo de 4,5:1, también durante las transiciones.
• →Los vídeos que forman parte de la pieza tienen controles de pausa.

Si quieres repasar la base, en qué es la accesibilidad web explicamos los principios de WCAG de forma sencilla.

07Rendimiento y móvil: la historia tiene que fluir

Una pieza de scrollytelling suele tener imágenes grandes, vídeo y animaciones, así que el rendimiento se planifica desde el guion:

• →La primera escena carga con prioridad; las siguientes se cargan a medida que se acercan.
• →Las secuencias de fotogramas se sustituyen por vídeo cuando es posible, que comprime mucho mejor que decenas de imágenes.
• →Las animaciones usan solo transform y opacity para mantener 60 fotogramas por segundo.
• →Se prueba en un móvil de gama media, no solo en el portátil del equipo de diseño.

En móvil, además, las composiciones se piensan en vertical: el visual ocupa la mitad superior y el texto pasa por la inferior, o el texto se superpone con un fondo que garantice el contraste. Una escena que en escritorio tiene imagen a un lado y texto al otro rara vez se traduce bien solo apilando.

08Una historia que se recorre con gusto

El mejor scrollytelling es el que hace que el scroll se olvide. Para lograrlo hace falta una historia que merezca contarse, un guion con escenas claras, un ritmo probado con el dedo y una técnica que respete a quien lee: su velocidad, sus preferencias y su dispositivo. Cuando todo eso encaja, una página web puede emocionar como una buena pieza audiovisual.

En SIMA combinamos diseño web, motion y producción audiovisual para crear este tipo de experiencias, desde el guion hasta el código, dentro de nuestro servicio de diseño web y experiencia digital. Si tienes una historia que quieres contar de otra manera, escríbenos y le buscamos su forma.