Guía Rápida de Animaciones de Scroll en CSS

Por Jorge Saud · 10 de febrero de 2025

Introducción

Aquí hablaremos sobre la versión simplificada de las Animaciones de Scroll CSS, nos concentraremos en 2 maneras principales de implementar esta animación de scroll solo con css, ambas usando la notación animation-timeline y “animation-range```

• link a la especificacion

Este es un borrador WIP, y está sujeto a cambios pero en chrome ya está funcionando, tan pronto como esté finalizado actualizaremos este post

El problema

El problema es que tenemos que usar mucho javascript para hacer esto funcionar, y no estamos usando las animaciones de scroll nativas, por lo que necesitamos implementar nuestras propias animaciones de scroll.

La solución

Usaremos animation-timeline: view() y animation-timeline: scroll() para crear las animaciones basadas en el desplazamiento (scroll). Además, utilizaremos animation-range para definir la duración no en tiempo, sino en porcentaje de entrada y salida de la animación, o en porcentaje del total del desplazamiento del elemento padre.

Basado en animation-timeline: scroll()

Este tipo de animación se usa basada en la posición del desplazamiento del contenedor de overflow del padre.

<div class="animate-view-scroll">animate-view-scroll</div>

<style>
  body {
    scroll-timeline-name: --main-scroll;
  }
  .animate-view-scroll {
    height: 300px;
    width: 300px;
    background-color: red;
    animation-timeline: scroll();
    scroll-timeline: --main-scroll inline;
    animation-name: scale;
    transform: scale(0);
  }
  @keyframes scale {
    to {
      transform: scale(1);
    }
  }
</style>

Basado en animation-timeline: view()

Este tipo de animación se basa en la introducción y la observabilidad del nodo en la pantalla, este texto la implementación es sencilla, solo necesitamos agregar animation-timeline: view() al css del div y establecer una animation-range para definir la duración de la entrada y salida de la animación en este caso establecemos la entrada en 10% de la pantalla y el final cuando cubra el 40% de la pantalla después de eso podemos agregar el nombre de la animación @keyframe para usar esto como el punto de inicio y final de la animación, obteniendo el siguiente código:

<div
  class="animate-view h-[300px] w-[300px] bg-amber-950 z-10 text-yellow-300 grid place-items-center my-10"
>
  Ejemplo de prueba
</div>
<style>
  .animate-view {
    animation-timeline: view();
    animation-range: entry 30% cover 60%;
    animation-name: reveal;
    animation-fill-mode: forwards;
    translate: 100px 100px;
    opacity: 0;
  }
  @keyframes reveal {
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
</style>

Inclusive en algunas situaciones podemos usar animation-timeline: view(pxToTheTop,pxToTheBottom) con un parámetro como pxToTheTop y pxToTheBottom para definir la posición final y inicial de la animación incluso cuando parece no intuitivo, es porque prefiero usar animation-range: entry 10% cover 60%; que se refiere a la entrada del elemento en la vista o animation-range-start: 100px; animation-range-end: 500px; que es para un control más granular de la animación.

Y para mantener la animación final en el desplazamiento podemos usar el animation-fill-mode: forwards;.