Dominando CSS @scroll-timeline: Control de Animación a Través del Progreso de Desplazamiento

En el panorama en constante evolución del desarrollo web, crear experiencias de usuario atractivas e interactivas es primordial. CSS ofrece varias herramientas para lograr esto, y una de las más poderosas, aunque a menudo pasada por alto, es la regla @scroll-timeline. Esta característica permite a los desarrolladores vincular las animaciones directamente al progreso de desplazamiento de un elemento, creando animaciones cautivadoras impulsadas por el scroll. Este artículo proporciona una exploración exhaustiva de @scroll-timeline, que cubre su sintaxis, propiedades, uso práctico y técnicas de animación avanzadas para elevar tus diseños web.

¿Qué es CSS @scroll-timeline?

@scroll-timeline es una regla CSS que define una línea de tiempo de desplazamiento, que es esencialmente una secuencia de estados que corresponden a la posición de desplazamiento de un elemento especificado. En lugar de depender de animaciones tradicionales basadas en el tiempo, @scroll-timeline vincula el progreso de la animación a la acción de desplazamiento del usuario. Esto da como resultado una animación más natural y receptiva, ya que la velocidad de la animación se controla directamente por el comportamiento de desplazamiento del usuario.

Esto abre emocionantes posibilidades para:

• Narración visual: Revela el contenido progresivamente a medida que el usuario se desplaza.
• Visualización de datos interactiva: Anima gráficos y diagramas a medida que el usuario explora los datos.
• Efectos de paralaje: Crea profundidad y dimensión animando diferentes elementos a diferentes velocidades según la posición de desplazamiento.
• Indicadores de progreso: Representa visualmente el progreso del usuario a través de un documento largo.

Sintaxis y Propiedades

La sintaxis básica de la regla @scroll-timeline es la siguiente:

            @scroll-timeline timeline-name {
  source: auto | <element-selector>;
  orientation: auto | block | inline;
  scroll-offsets: <scroll-offset>[ , <scroll-offset> ]*;
}

            

              
                Copy
              
            
          

Desglosemos cada propiedad:

timeline-name

Este es un identificador único para tu línea de tiempo de desplazamiento. Usarás este nombre para hacer referencia a la línea de tiempo al aplicarla a una animación.

Ejemplo:

            @scroll-timeline my-scroll-timeline {
  /* ... */
}

            

              
                Copy
              
            
          

source

Esta propiedad especifica el elemento cuya posición de desplazamiento impulsará la animación. Puede tener dos valores:

• auto: El navegador determina automáticamente el elemento de desplazamiento. A menudo, este es la ventana gráfica del documento (la ventana del navegador).
• <element-selector>: Un selector CSS que identifica el elemento específico que se utilizará como fuente de desplazamiento. Esto te permite apuntar a contenedores o secciones específicas en tu página.

Ejemplo (usando la ventana gráfica como fuente):

            @scroll-timeline my-scroll-timeline {
  source: auto; /* Usa la ventana gráfica */
  /* ... */
}

            

              
                Copy
              
            
          

Ejemplo (usando un elemento específico como fuente):

            @scroll-timeline my-scroll-timeline {
  source: #scrollable-container; /* Usa el elemento con ID "scrollable-container" */
  /* ... */
}

            

              
                Copy
              
            
          

orientation

Esta propiedad especifica la dirección de desplazamiento que se utilizará para la línea de tiempo. Determina si la animación es impulsada por el desplazamiento vertical u horizontal. Puede tener tres valores:

• auto: El navegador determina automáticamente la dirección de desplazamiento en función de la dirección de desplazamiento dominante del elemento de origen.
• block: Utiliza la dirección de desplazamiento en bloque (vertical, en la mayoría de los modos de escritura).
• inline: Utiliza la dirección de desplazamiento en línea (horizontal, en la mayoría de los modos de escritura).

Ejemplo (usando el desplazamiento vertical):

            @scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block; /* Desplazamiento vertical */
  /* ... */
}

            

              
                Copy
              
            
          

Ejemplo (usando el desplazamiento horizontal):

            @scroll-timeline my-scroll-timeline {
  source: #horizontal-scroll-container;
  orientation: inline; /* Desplazamiento horizontal */
  /* ... */
}

            

              
                Copy
              
            
          

scroll-offsets

Esta propiedad define las posiciones de desplazamiento que corresponden a puntos específicos en la animación. Es una propiedad opcional, y si no se especifica, la animación se reproducirá desde el principio hasta el final del área desplazable. Cuando se usa, puedes definir uno o más desplazamientos de desplazamiento, cada uno especificando una posición de desplazamiento y un punto correspondiente en el progreso de la animación.

La sintaxis para un <scroll-offset> es:

            <scroll-offset> = <length-percentage> [ at <length-percentage> ]

            

              
                Copy
              
            
          

Donde:

• El primer <length-percentage> representa la posición de desplazamiento dentro del área desplazable.
• El at <length-percentage> opcional representa el progreso de animación correspondiente (0% a 100%). Si se omite, el progreso de la animación se distribuye uniformemente entre los desplazamientos de desplazamiento definidos.

Ejemplos:

            /* La posición de desplazamiento 200px corresponde al progreso de la animación 0% */
scroll-offsets: 200px at 0%;

/* La posición de desplazamiento al 50% del área desplazable corresponde al progreso de la animación 50% */
scroll-offsets: 50% at 50%;

/* Múltiples desplazamientos: */
scroll-offsets: 0px at 0%, 500px at 50%, 1000px at 100%;

/* Sin la palabra clave "at" - progreso de animación distribuido uniformemente: */
scroll-offsets: 0px, 500px, 1000px; /* Equivalente a 0px at 0%, 500px at 50%, 1000px at 100% */

            

              
                Copy
              
            
          

Consideraciones importantes para scroll-offsets:

• Si especificas scroll-offsets, asegúrate de que cubran el rango del área desplazable para evitar un comportamiento de animación inesperado.
• El progreso de la animación se interpola entre los desplazamientos de desplazamiento definidos.
• Si no especificas scroll-offsets, el progreso de la animación se distribuirá uniformemente en toda el área desplazable.

Aplicar la Línea de Tiempo de Desplazamiento a una Animación

Una vez que hayas definido tu línea de tiempo de desplazamiento, debes aplicarla a una animación CSS utilizando la propiedad animation-timeline.

La sintaxis es simple:

            animation-timeline: timeline-name; /* Usa el nombre que definiste en @scroll-timeline */

            

              
                Copy
              
            
          

También necesitarás definir una animación CSS estándar usando @keyframes. La animación define los cambios en las propiedades CSS que ocurrirán a medida que el usuario se desplaza. Además, querrás asegurarte de que la propiedad CSS `animation-range` esté configurada. Define el rango de la línea de tiempo de desplazamiento que activará la animación.

Aquí tienes un ejemplo completo:

            /* Define la línea de tiempo de desplazamiento */
@scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block;
}

/* Define la animación */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aplica la animación y la línea de tiempo de desplazamiento a un elemento */
.animated-element {
  animation: fade-in 1s forwards;
  animation-timeline: my-scroll-timeline;
  animation-range: entry 25% cover 75%; /* entry y cover son valores de palabras clave para los rangos de inicio y fin */
}

            

              
                Copy
              
            
          

En este ejemplo:

• La @scroll-timeline llamada my-scroll-timeline está definida, usando la ventana gráfica como fuente y el desplazamiento vertical como orientación.
• La @keyframes llamada fade-in define una simple animación de desvanecimiento y deslizamiento hacia arriba.
• La clase .animated-element tiene aplicada la animación fade-in, pero en lugar de ser activada por un temporizador, está controlada por la my-scroll-timeline.
• El rango de animación define que la animación debe comenzar cuando el borde superior del elemento entra en el 25% inferior de la ventana gráfica y finalizar cuando sale del 25% superior.

Ejemplos Prácticos y Casos de Uso

Exploremos algunos ejemplos prácticos de cómo puedes usar @scroll-timeline para crear experiencias web atractivas.

1. Revelar Contenido Progresivamente

Este es un caso de uso común donde revelas contenido a medida que el usuario se desplaza por la página. Imagina un artículo de formato largo con secciones que se desvanecen a medida que entran en la vista.

HTML:

            <section class="content-section">
  <h2>Sección 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

<section class="content-section">
  <h2>Sección 2</h2>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</section>

            

              
                Copy
              
            
          

CSS:

            @scroll-timeline reveal-timeline {
  source: auto;
  orientation: block;
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-section {
  animation: reveal 1s forwards;
  animation-timeline: reveal-timeline;
  animation-range: entry 25% cover 75%;
}

            

              
                Copy
              
            
          

En este ejemplo, cada .content-section se desvanecerá a medida que se desplace hacia la ventana gráfica. El `animation-range` asegura que la animación comience cuando el borde superior de la sección entre en el 25% inferior de la ventana gráfica y termine cuando la sección salga del 25% superior.

2. Efectos de Paralaje

Los efectos de paralaje crean una sensación de profundidad moviendo elementos de fondo a diferentes velocidades que los elementos de primer plano. @scroll-timeline facilita la implementación del desplazamiento de paralaje.

HTML:

            <div class="parallax-container">
  <div class="background-element"></div>
  <div class="foreground-element">
    <h2>Sección de Paralaje</h2>
    <p>Algún contenido aquí...</p>
  </div>
</div>

            

              
                Copy
              
            
          

CSS:

            .parallax-container {
  position: relative;
  height: 500px; /* Ajusta según sea necesario */
  overflow: hidden;
}

.background-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg'); /* Reemplaza con tu imagen */
  background-size: cover;
  transform: translateZ(-1px) scale(2); /* Crea el efecto de paralaje */
  transform-origin: top;
  pointer-events: none; /* Permite hacer clic en los elementos de primer plano */

  animation: parallax-bg 1s linear forwards;
  animation-timeline: parallax-timeline;
  animation-range: 0vh 100vh;
}

.foreground-element {
  position: relative;
  z-index: 1;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.8);
}

@scroll-timeline parallax-timeline {
  source: auto;
  orientation: block;
}

@keyframes parallax-bg {
    0% { transform: translateZ(-1px) scale(2) translateY(0px); }
    100% { transform: translateZ(-1px) scale(2) translateY(-50vh); }
}

            

              
                Copy
              
            
          

En este ejemplo, el .background-element está posicionado detrás del .foreground-element y se escala usando transform. Luego, se aplica la animación `parallax-bg`, lo que hace que el fondo se mueva más lento que el primer plano a medida que el usuario se desplaza, creando el efecto de paralaje. El `animation-range` asegura que la animación se ejecute a lo largo de toda la altura de la ventana gráfica (0vh a 100vh).

3. Animación de una Barra de Progreso

Puedes usar @scroll-timeline para crear una barra de progreso que represente visualmente el progreso de desplazamiento del usuario a través de un documento.

HTML:

            <div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <!-- Tu contenido aquí -->
</div>

            

              
                Copy
              
            
          

CSS:

            .progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #007bff;
  animation: progress-bar-fill 1s linear forwards;
  animation-timeline: document-scroll-timeline;
}

@scroll-timeline document-scroll-timeline {
  source: auto;
  orientation: block;
}

@keyframes progress-bar-fill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

            

              
                Copy
              
            
          

En este ejemplo, el ancho de la .progress-bar se anima del 0% al 100% a medida que el usuario se desplaza por el documento. La @scroll-timeline se llama `document-scroll-timeline`, lo que deja claro lo que representa.

Técnicas Avanzadas

Una vez que comprendas los conceptos básicos, puedes explorar algunas técnicas avanzadas para crear animaciones impulsadas por el scroll aún más sofisticadas.

1. Usar scroll-offsets para un Control Preciso

La propiedad scroll-offsets te permite mapear posiciones de desplazamiento específicas a valores de progreso de animación específicos. Esto es útil cuando deseas activar ciertos estados de animación en puntos precisos durante el desplazamiento.

            @scroll-timeline custom-timeline {
  source: #scrollable-container;
  orientation: block;
  scroll-offsets: 100px at 0%, 500px at 50%, 1000px at 100%;
}

@keyframes custom-animation {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

.animated-element {
  animation: custom-animation 1s forwards;
  animation-timeline: custom-timeline;
}

            

              
                Copy
              
            
          

En este ejemplo, la animación:

• Comenzará en translateX(-100px) y opacity: 0 cuando la posición de desplazamiento sea 100px.
• Alcanzará translateX(0) y opacity: 1 cuando la posición de desplazamiento sea 500px.
• Terminará en translateX(100px) y opacity: 0 cuando la posición de desplazamiento sea 1000px.

2. Combinar con JavaScript

Si bien @scroll-timeline ofrece un poderoso control de animación a través de CSS, puedes combinarlo con JavaScript para una flexibilidad aún mayor. Por ejemplo, podrías usar JavaScript para:

• Calcular y actualizar dinámicamente los scroll-offsets en función del tamaño de la ventana gráfica o los cambios de contenido.
• Activar efectos o interacciones adicionales basadas en JavaScript basadas en el progreso de desplazamiento.
• Implementar soluciones de respaldo para navegadores que no admiten completamente @scroll-timeline.

Aquí tienes un ejemplo básico de cómo usar JavaScript para leer el progreso de desplazamiento y actualizar una variable CSS:

            const scrollableElement = document.getElementById('scrollable-container');
const animatedElement = document.querySelector('.animated-element');

scrollableElement.addEventListener('scroll', () => {
  const scrollPosition = scrollableElement.scrollTop;
  const maxScroll = scrollableElement.scrollHeight - scrollableElement.clientHeight;
  const scrollPercentage = (scrollPosition / maxScroll) * 100;

  animatedElement.style.setProperty('--scroll-progress', scrollPercentage + '%');
});

            

              
                Copy
              
            
          

Luego puedes usar esta variable CSS dentro de tu animación:

            @keyframes custom-animation {
  0% {
    transform: translateX(calc(var(--scroll-progress) * -1px));
  }
  100% {
    transform: translateX(calc(var(--scroll-progress) * 1px));
  }
}

.animated-element {
  --scroll-progress: 0%; /* Valor inicial */
  animation: custom-animation 1s linear forwards;
  animation-timeline: scroll-driven-timeline;
}

            

              
                Copy
              
            
          

3. Aprovechar Diferentes Funciones de Facilitación

Si bien animation-timing-function no es directamente aplicable a la línea de tiempo de desplazamiento en sí (ya que la línea de tiempo es impulsada por el progreso de desplazamiento, no por el tiempo), aún puedes usar funciones de facilitación dentro de tus @keyframes para controlar la velocidad y el ritmo de la animación en diferentes etapas. Experimenta con diferentes funciones de facilitación como ease-in, ease-out, ease-in-out o incluso curvas de Bézier cúbicas personalizadas para lograr el efecto deseado.

Compatibilidad del Navegador y Alternativas

A finales de 2023, @scroll-timeline disfruta de una compatibilidad relativamente buena con los navegadores modernos como Chrome, Edge, Firefox y Safari. Sin embargo, es esencial verificar el estado actual de compatibilidad en sitios web como Can I use... antes de implementarlo en producción.

Para los navegadores que no admiten @scroll-timeline, puedes proporcionar una alternativa usando los listeners de eventos de desplazamiento basados en JavaScript tradicionales y las bibliotecas de animación como GSAP (GreenSock Animation Platform) o Anime.js. También puedes usar consultas de características CSS (@supports) para aplicar condicionalmente las animaciones basadas en @scroll-timeline o las alternativas basadas en JavaScript.

            @supports (animation-timeline: scroll()) {
  /* Aplicar animaciones basadas en @scroll-timeline */
  .animated-element {
    animation: fade-in 1s forwards;
    animation-timeline: my-scroll-timeline;
  }
} @else {
  /* Aplicar alternativa basada en JavaScript */
  .animated-element {
    /* Ocultar inicialmente */
    opacity: 0;
  }

  /* (Código JavaScript para detectar el desplazamiento y aplicar la opacidad) */
}

            

              
                Copy
              
            
          

Consideraciones de Accesibilidad

Al usar @scroll-timeline o cualquier técnica de animación, es crucial considerar la accesibilidad. Asegúrate de que tus animaciones no causen:

• Convulsiones: Evita animaciones intermitentes o que cambian rápidamente.
• Distracción: Proporciona una forma para que los usuarios pausen o deshabiliten las animaciones, especialmente si son largas o distraen.
• Sobrecarga cognitiva: Usa animaciones con moderación y asegúrate de que sirvan para un propósito claro, en lugar de ser puramente decorativas.
• Mareo por movimiento: Ten en cuenta los efectos de paralaje, ya que pueden desencadenar mareos por movimiento en algunos usuarios.

Considera proporcionar formas alternativas de acceder a la información presentada a través de animaciones, como contenido estático o texto descriptivo. Usa los atributos ARIA para proporcionar significado semántico y contexto a las tecnologías de asistencia.

Mejores Prácticas

Aquí hay algunas de las mejores prácticas a tener en cuenta al trabajar con @scroll-timeline:

• Usa nombres descriptivos de línea de tiempo: Elige nombres de línea de tiempo que indiquen claramente su propósito (por ejemplo, parallax-background-timeline, reveal-section-timeline).
• Mantén las animaciones con buen rendimiento: Optimiza tus animaciones para evitar cuellos de botella en el rendimiento. Usa propiedades CSS aceleradas por hardware como transform y opacity siempre que sea posible.
• Prueba a fondo: Prueba tus animaciones en diferentes dispositivos y navegadores para asegurarte de que funcionen como se espera y no causen problemas de accesibilidad o rendimiento.
• Comienza simple: Comienza con animaciones simples y agrega gradualmente complejidad a medida que ganas experiencia.
• Considera la experiencia del usuario: Asegúrate de que tus animaciones mejoren la experiencia del usuario, en lugar de restarle valor. Evita animaciones demasiado complejas o que distraigan.
• Usa la propiedad CSS `animation-range`: Asegúrate de que las animaciones solo se activen cuando un elemento está en la ventana gráfica para una experiencia fluida y predecible.

Conclusión

@scroll-timeline es una poderosa función CSS que permite a los desarrolladores crear animaciones interactivas impulsadas por el scroll y atractivas. Al vincular animaciones al comportamiento de desplazamiento del usuario, puedes crear experiencias web más naturales y receptivas. Al comprender su sintaxis, propiedades y técnicas avanzadas, puedes aprovechar @scroll-timeline para elevar tus diseños web y crear recorridos de usuario cautivadores. Recuerda considerar la compatibilidad del navegador, la accesibilidad y el rendimiento al implementar @scroll-timeline, y siempre prioriza la experiencia del usuario.