La función view() y view-timeline

En artículos anteriores hemos visto como crear animaciones basadas en el desplazamiento o scroll por la página (o por ciertos elementos). En este artículo vamos a explorar como combinar esa característica con la aparición de elementos en el viewport o región visible actual del navegador.

La función view()

La función view() nos viene muy bien para situaciones como la que acabamos de mencionar, en las que necesitamos que las animaciones de scroll se realicen justo cuando aparecen en la región visible del navegador (viewport).

La sintaxis de la función view() es la siguiente:

Observa que los parámetros a utilizar son el eje de la orientación en la que se desplaza y un valor de ajuste. Si se omiten los parámetros, se tomarán los valores por defecto, que son block auto.

Opciones de view()

Los parámetros disponibles para la función view() son los siguientes:

Recuerda que block e inline son las versiones lógicas de x e y respectivamente, y pueden ser diferentes en otros idiomas. Puedes ver más sobre este tema en Propiedades Lógicas en CSS.

Ejemplo de view()

La función view() es muy similar a la función scroll(), pero se utiliza en situaciones donde quieres que el elemento comience a animarse sólo cuando esté a la vista del usuario. Se denominan Animaciones de scroll de vista.

Veamos un ejemplo utilizando la función view(), para así entender bien la diferencia entre scroll() y view(). La animación mostrará un cuadrado para que aparezca cuando entre en la zona visible del navegador:

• 1️⃣ En este caso, creamos la animación en los elementos .box.
• 2️⃣ Con max-height limitamos el alto de la página para poder hacer scroll.
• 3️⃣ La función view() define que se use una línea de tiempo cuando aparezca en el viewport.
• 4️⃣ La animación va desde 0x0 (escala 0) e invisible hasta tamaño real (escala 1) y visible.

body {
  max-height: 250px;
  font-size: 6rem;
}

.box {
  width: 250px;
  height: 250px;
  margin: auto;
  background: indigo;
  animation: change linear forwards;
  animation-timeline: view();
}

@keyframes change {
  from { scale: 0; opacity: 0 }
  to { scale: 1; opacity: 1; }
}

<p>Escribe aquí mucho texto para hacer scroll.</p>

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

<p>Escribe aquí mucho texto para hacer scroll.</p>

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

<p>Escribe aquí mucho texto para hacer scroll.</p>

Observa que tenemos varios párrafos de texto y un elemento .box en medio de ellos. La función view() determina que deben empezar a animarse cuando sean visibles en el viewport y dejar de animarse cuando ya no sean visibles.

La función view() al estar vacía, está usando sus valores por defecto view(block auto), pero podrían personalizarse. Por ejemplo:

• 1️⃣ Modificamos la función view() y añadimos los parámetros block 80% auto.
• 2️⃣ El valor block define la orientación (vertical).
• 3️⃣ El valor 80% ajusta cuando inicia la animación y auto el final. Admite valores negativos.

body {
  max-height: 250px;
  font-size: 6rem;
}

.box {
  width: 250px;
  height: 250px;
  margin: auto;
  background: indigo;
  animation: change linear forwards;
  animation-timeline: view(block 80% auto);
}

@keyframes change {
  from { scale: 0; opacity: 0 }
  to { scale: 1; opacity: 1; }
}

<p>Escribe aquí mucho texto para hacer scroll.</p>

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

<p>Escribe aquí mucho texto para hacer scroll.</p>

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

<p>Escribe aquí mucho texto para hacer scroll.</p>

Observa que de indicar un solo valor de ajuste, se aplicará a inicio y final. Si indicamos dos valores por separados, como en este caso 80% auto, se aplicará uno al inicio y otro al final.

La propiedad view-timeline

Hasta ahora, y probablemente sin saberlo, hemos creado líneas de tiempo (timelines) anónimos, es decir, sin nombre. Sin embargo, CSS nos da la posibilidad de crearlos con un nombre concreto, y de esta forma poder crear múltiples timelines y ser más selectivo y organizado a la hora de crear animaciones.

Al utilizar estas propiedades, creamos una línea de tiempo, pero en lugar de ser anónima tiene un nombre determinado (debemos usar la sintaxis de variables CSS) y está acoplada al elemento donde lo creamos.

Volvamos a crear el ejemplo anterior, pero esta vez utilizando líneas de tiempo con nombre:

body {
  max-height: 250px;
  font-size: 6rem;
}

.box {
  width: 250px;
  height: 250px;
  margin: auto;
  background: indigo;
  animation: change linear forwards;
  view-timeline: --appears block 80% auto;
  animation-timeline: --appears;
}

@keyframes change {
  from { scale: 0; opacity: 0 }
  to { scale: 1; opacity: 1; }
}

<p>Escribe aquí mucho texto para hacer scroll.</p>

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

<p>Escribe aquí mucho texto para hacer scroll.</p>

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

<p>Escribe aquí mucho texto para hacer scroll.</p>

Como puedes ver, hemos modificado las dos últimas lineas de CSS del elemento .box, haciendo los siguientes cambios:

• 1️⃣ Con la propiedad view-timeline creamos una nueva linea de tiempo llamada --appears.
• 2️⃣ Definimos orientación vertical con block.
• 3️⃣ Ajustamos que empiece la entrada de la animación al 80%.
• 4️⃣ Ajustamos en auto la salida de la animación.