Skip to content

Webs de scrollytelling

El scrollytelling es el arte de contar una historia a través del movimiento de desplazamiento (scroll). El objetivo es que el contenido no solo esté ahí, sino que reaccione a la interacción del usuario.

En este documento daremos unas pautas básicas a seguir para construir webs con esta estrategia, y algunas librerías que podemos emplear para añadir efectos adicionales.

1. Introducción

El scrollytelling es una técnica de visualización de contenidos en la que los elementos de la página cambian a medida que el usuario hace scroll. Así, podemos ir contando una historia de manera interactiva, por ejemplo, ampliando los detalles, explicando paso a paso una cronología o mostrando elementos nuevos de texto, imagen y vídeo.

Es una técnica muy apropiada para los contenidos de gran extensión, en los que queremos explicar algo en detalle y acompañar el texto de ejemplos gráficos, audio y vídeo. El usuario percibe rápidamente que tiene que desplazarse para descubrir el contenido, de manera que se siente parte de la historia y tiene más motivación para seguir leyendo.

1.1. Tipos de scrollytelling

El scrollytelling puede aplicarse de maneras muy diferentes en función del concepto que queramos explicar:

  • Visualizaciones de dimensiones: útil para explorar elementos visuales en profundidad, como un mapa grande. The Atlas of Moons the National Geographic es un ejemplo de ello, donde se exploran los distintos planteas y lunas del sistema solar.
  • Scroll como activador: hacer scroll activa una nueva visualización o animación, de manera que el usuario puede administrar el ritmo al que consumir la información. Snow Fall: The Avalanche at Tunnel es un ejemplo de ello, donde se explica un documental sobre una avalancha incluyendo animaciones y elementos gráficos que se van mostrando a medida que hacemos scroll para ilustrar mejor la historia que se cuenta.
  • Scroll para pasar de un paso al siguiente: en lugar de explicar los diferentes pasos de un proceso a través de una lista o un control deslizante, le damos al usuario la oportunidad de ir al siguiente paso haciendo scroll.

2. Primeros pasos

Antes de comenzar a elaborar nuestra web de scrollytelling hay que tener claro qué se va a contar. Un par de recomendaciones al respecto:

  • Dibujar en papel o en algún diseñador como Figma o similar los momentos clave del contenido. Tratar de responder a preguntas como ¿Qué aparece primero? o ¿Qué se va a ver después?
  • No pensar en la web como páginas separadas, sino como una tira larga donde los elementos van entrando y saliendo a medida que se hace scroll.

2.1. Estructura técnica sugerida

Para que el proyecto resulte profesional y fluido, se recomienda seguir ciertas pautas básicas:

  • Utilizar librerías JavaScript para aplicar ciertos efectos, ya que hacerlo con JavaScript puro puede resultar costoso e ineficiente. Más adelante explicaremos algunas librerías habituales.
  • Dividir el contenido HTML en contenedores de escena, secciones de altura completa (100vh), de forma que cada sección sea un acto de la historia que queremos contar.
  • Utilizar el efecto sticky (position: sticky) o similares para fijar objetos en ciertos momentos. Esto permitirá que ese objeto se quede en pantalla mientras otros van cambiando cuando hagamos scroll.
  • Añadir algún indicador de progreso o barra visual para que el usuario sepa por dónde va en la historia
  • Jugar con la jerarquía de capas y el z-index para colocar ciertas cosas por encima de otras (por ejemplo, texto que se vaya moviendo sobre imágenes fijas).

2.2. Optimización

Dado que una página con scrollytelling puede acumular una gran cantidad de contenido, esperar a que el navegador lo cargue todo puede ralentizar el proceso y empeorar la experiencia de usuario. Para paliar esto podemos aplicar diversas estrategias:

  • Lazy loading: no cargar todos los recursos multimedia (imágenes, vídeos) al principio, sino irlas cargando a medida que entran en escena.
  • Usar formatos de archivos ligeros, como webp para imágenes o SVG para animaciones ligeras. Evitar vídeos pesados.
  • Evitar eventos JavaScript pesados que recalculen el layout constantemente. Muchas librerías especializadas evitan este problema.
  • Asegurar que la navegación es igualmente fluida y correcta en móviles (mobile-first).

3. Librerías

Existen varias librerías JavaScript que nos pueden ayudar mucho a añadir efectos en nuestra web y a controlar mejor el scroll y los elementos que entran y salen.

3.1. GSAP

Una de las más populares es GSAP (web oficial aquí). Es la que se utiliza en webs como las de Tesla o Apple para aplicar ciertos efectos. Se utiliza conjuntamente junto a su plugin ScrollTrigger (web).

Con GSAP podemos cambiar propiedades de objetos a lo largo del tiempo. Sus métodos principales son:

  • gsap.from(): estado inicial. El elemento viene desde los valores que indiquemos hacia su posición original en el CSS.
  • gsap.to(): estado final, a dónde queremos que llegue el elemento.
  • gsap.fromTo(): se definen tanto el inicio como el final.

Aquí vemos un ejemplo:

gsap.to(".mi-clase", 
{ 
    x: 100,                 // Mover 100px en eje X
    duration: 2,            // Duración de 2 segundos
    backgroundColor: "red", // Los nombres de propiedad usan camelCase
    ease: "bounce"          // Tipo de suavizado (rebote, elástico, etc.)
});

Además, también podemos definir timelines (líneas de tiempo) donde enlazamos animaciones una tras otra:

const tl = gsap.timeline();

tl.to(".caja1", { x: 200, duration: 1 })
  .to(".caja2", { y: 200, duration: 1 }) // Empieza justo cuando acaba la caja1
  .to(".caja3", { rotation: 360 });

Si añadimos el plugin de ScrollTrigger, permitimos que el scroll del navegador sea el reproductor de las animaciones, que es lo que nos interesa en nuestro caso. Para ello primero debemos registrar el plugin en el objeto GSAP:

gsap.registerPlugin(ScrollTrigger);

Después ya podemos emplearlo en nuestras animaciones:

gsap.to(".box", 
{
    scrollTrigger: ".box", // La animación se dispara cuando la caja entra en el viewport
    x: 500,
    duration: 2
});

Algunas propiedades importantes de ScrollTrigger:

  • trigger: el elemento que vigila el scroll.
  • start: cuándo empieza la animación. Ejemplo: "top center" (cuando la parte superior del elemento llega al centro de la pantalla).
  • end: cuándo termina. Ejemplo: "bottom 100px".
  • scrub: Vincula la animación al movimiento del ratón. Si es true (o un número como 1), si dejas de hacer scroll, la animación se para. Si subes, la animación vuelve atrás.
  • pin: Bloquea el elemento en la pantalla mientras dura la animación (fundamental para que el fondo no se mueva). Sería el equivalente al sticky de CSS, pero desde código JavaScript.

Aquí vemos cómo configurar estas propiedades para revelar una imagen mediante scroll:

gsap.from(".foto-producto", 
{
    scrollTrigger: 
    {
        trigger: ".foto-producto",
        start: "top 80%", // Empieza cuando la foto está casi entrando por abajo
        end: "top 30%",
        scrub: true,
        markers: true     // Muestra guías visuales para desarrollo (luego se quitan)
    },
    opacity: 1,
    duration: 1
});

3.1.1. Formas de usar GSAP

Para incorporar GSAP en nuestros diseños existen dos formas principales:

  • Cargar las librerías a través de CDN. Por ejemplo:
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<!-- Nuestro JavaScript -->
<script src="js/main.js"></script>
  • Instalarlo con NPM en proyectos Node, Vite o similares: npm install gsap. Después podemos importar sus elementos en nuestro código JavaScript:
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);
...

Ejercicio 1

Utiliza el código anterior para revelar una imagen de tu elección en una página.

3.2. AOS

La librería AOS (Animate On Scroll) es otra librería menos potente y más sencilla de usar que la anterior. Aquí tienes su web oficial.

Para utilizarla es habitual hacerlo a través de CDN. Cargamos los estilos CSS al inicio y el código JavaScript al final de la(s) página(s):

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
...
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  AOS.init();
</script>

Una vez incorporada, para animar elementos sólo tenemos que añadir en ellos el atributo data-aos con el tipo de animación que queramos:

<div data-aos="fade-up">Apareceré desde abajo</div>
<div data-aos="flip-left">Daré una vuelta hacia la izquierda</div>
<div data-aos="zoom-in">Me haré grande al aparecer</div>

Podemos personalizar cómo se comporta cada animación con atributos adicionales:

  • data-aos-duration: Duración en milisegundos (de 0 a 3000).
  • data-aos-delay: Retraso antes de empezar.
  • data-aos-offset: Cuántos píxeles debe entrar el elemento en pantalla antes de dispararse (por defecto 120).
  • data-aos-easing: Curva de animación (suavidad al entrar y/o al salir)
  • data-aos-once: Si se pone en true, la animación solo ocurre la primera vez que bajas (no se repite al subir).

Aquí vemos un ejemplo combinado:

<div 
  data-aos="fade-right" 
  data-aos-offset="300" 
  data-aos-easing="ease-in-sine"
  data-aos-duration="1000">
  Entro desde la derecha muy suavemente
</div>

Además, cuando inicializamos AOS con su método init podemos establecer algunas opciones de configuración globales:

AOS.init(
{
  duration: 800, // Todas las animaciones durarán 0.8s
  once: true,    // Solo se animan una vez
  mirror: false  // No se re-animan al hacer scroll hacia arriba
});

Ejercicio 2

Crea una cuadrícula de 3 imágenes (o cajas de colores) que aparezcan de forma escalonada. Sigue estos pasos:

  • Crea 3 contenedores (div) uno al lado del otro.
  • Haz que la primera aparezca con fade-up, la segunda con fade-up y un delay de 200, y la tercera con fade-up y un delay de 400.

4. Otros recursos

A continuación tienes enlaces a otros recursos adicionales que te pueden ayudar a construir tu web scrollytelling:

  • Awwwards: el "salón de la fama" del diseño web. Podemos buscar ejemplos por categoría, y buscando por scrolling o infinite scroll ver algunos ejemplos.
  • Land book: ejemplos de landing pages para inspirar nuestro diseño.
  • Unsplash y Pexels: fotos gratuitas para incluir en nuestras webs
  • Undraw: diseños minimalistas en SVG
  • Lottiefiles: animaciones vectoriales muy ligeras
  • Squoosh: optimizador para imágenes. Convierte imágenes a formato .webp