Animaciones del Scroll usando solo CSS

Siempre que hablamos de animaciones que involucren la interacción de otro elemento o acción, pensamos instantaneamente en las propiedades o métodos necesarios que JavaScript nos ofrece. Por que claro!, es el único lenguaje que nos permite hacer cálculos y en base a éstos, ejecutar ciertas funcionalidades o efectos.

Animaciones en CSS

Hace ya bastante tiempo que tenemos la posibilidad de crear animaciones usando puramente CSS, no es ningún misterio. Lo realmente complicado es usar estas animaciones cuando cierto parámetro se cumpla, ahí es cúando realmente se vuelve complicado y directamente no podemos depender del solo uso de CSS.

Así que para empezar, vamos a crear una pequeña animación. La cuál solo se basará en animar la escala y opacidad del elemento al que se la apliquemos.

@keyframes Pop {
  from {
    opacity: 0;
    scale: 0.5;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

.box {
  animation: Pop 3s linear;
}

Acabamos de crear una animación, ahora el problema es que la animación se realizará de inmediato y no cuando hagamos uso del Scroll.

Para solucionar esto, usaremos una propiedad un poco nueva: animation-timeline

Animation Timeline

Básicamente con ésta propiedad, podemos controlar el progreso de una animación. Y usaremos más especificamente el valor view(), él cuál ejecuta la animación, solo cuando el elemento se encuentra en la vista. Para una mejor apreciación, veamos un ejemplo:

Funciona increible, pero todavía queda cierto problema por resolver. Por ejemplo, la animación debería completarse cuando el o los elementos lleguen a la mitad del viewport.

Animation Range

La solución a ese pequeño inconveniente, la podemos encontrar en otra propiedad que controla el rango y se llama: animation-range, con ella podemos controlar a qué porcentaje del viewport se debería completar la animación.

Ahora tenemos una animación increible que se basa en el Scroll, y no tuvimos que recurrir a JavaScript en lo absoluto.

Acá puedes ver el código completo.

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Este es el código de los elementos que vamos a animar, pueden ser cualquier cosa o contener cualquier cosa. Y aplicaremos algunos estilos.

.boxes {
  display: flex;
  flex-flow: row wrap;
  max-width: 200px;
  margin: 0 auto;
  gap: 26px;
}

.box {
  border-radius: 5px;
  width: 40%;
  height: 50px;
  background: tomato;
}

La animación en cuestión:

@keyframes Pop {
  from {
    opacity: 0;
    scale: 0.5;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

Por último, le aplicamos la animación con las propiedades antes mencionadas.

.box {
  animation: Pop linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}