Crea una animación de carga de página en JavaScript con GSAP

Spanish (Español) translation by Carlos (you can also view the original English article)

Final product image — What You'll Be Creating

En el tutorial de hoy, aprenderemos a crear una animación de carga de página con GSAP, una de las bibliotecas para animaciones con JavaScript más predominantes y populares.

Para comprender mejor lo que vamos a crear, revisa la página de demostración. Asegúrate de hacer clic en los enlaces del menú para repetir la animación.

Este tipo de animaciones funcionan muy bien en combinación con bibliotecas de transición de página como barba.js y Highway.js.

Demostración de la animación de la página

Para este tutorial, nuestra demostración no se alojará en CodePen. Como necesitamos diferentes páginas para mostrar la animación, decidí que es mejor alojarla en GitHub. Esta es la estructura del proyecto:

panels-animation/
├── about.html
├── contact.html
├── index.html
├── main.css
└── main.js

Antes de continuar, cabe destacar que la inspiración para esta demostración se tomó del sitio web de Pure Cinema.

1. Empieza con el marcado de la página

Vamos a describir el marcado de la página index.html. Esta será similar a las otras páginas.

En su interior, colocaremos:

Una típica cabecera de página
Los paneles que se encargarán de dividir la pantalla en seis partes iguales
El elemento main donde se alojará el contenido principal de la página.

Asimismo, importaremos:

Por razones de estilo, la fuente Montserrat de Google Fonts
La versión más reciente de GSAP
Nuestros propios archivos de CSS y JavaScript

Considerando todo lo anterior, aquí está el marcado asociado:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
    <link rel="stylesheet" href="main.css">
    <title>Simple Page Loading Animation With GSAP</title>
  </head>
  
  <body>
    <header class="page-header">
      <nav>
        <ul>
          <li>
            <a href="index.html">Home</a>
          </li>
          <!-- more list items -->
        </ul>
      </nav>
    </header>
    
    <ul class="panels">
      <li class="panel"></li>
      <li class="panel"></li>
      <li class="panel"></li>
      <li class="panel"></li>
      <li class="panel"></li>
      <li class="panel"></li>
    </ul>
    
    <main class="page-main">
      <div>
        <h1>Home Page</h1>
        <!-- put more content here -->
      </div>
    </main>
    
    <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
    <script src="main.js"></script>   
  </body>
</html>

2. Define algunos estilos básicos

Como es habitual, continuaremos con algunas variables de CSS y restableceremos los estilos:

:root {
    --panel-width: calc(100% / 6);
    --darkblue: #02020c;
    --white: #fff;
    --lightgray: #fafafb;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

h1 {
    font-size: 3rem;
}

body {
    height: 100vh;
    font-family: "Montserrat", sans-serif;
    color: var(--white);
    overflow: hidden;
}

Se deben tener en cuenta dos cosas:

La variable panel-width determinará el ancho del panel.
La altura de la página será igual a la altura de la ventana gráfica.

3. Especifica los estilos principales

Ahora concentrémonos en los estilos principales. Dejaremos de lado los estilos de la cabecera ya que no tienen ninguna importancia.

Contenedor de panel

El contenedor del panel será un elemento a pantalla completa y posicionado fijo. Estará centrado de manera horizontal y sesgado hasta cierto punto. Además, debido a su distorsión, su ancho siempre sobrepasará y dependerá del ancho de la ventana gráfica. Como vamos a animar su propiedad clip-path más adelante, definiremos un valor predeterminado para esta propiedad que indicará la visibilidad completa del elemento.

Los paneles

Los paneles serán elementos posicionados de manera absoluta, y su ancho (width) y los valores de la propiedad left dependerán de la variable panel-width. Aclarado el punto, el valor de left para el primer panel será 0, para el segundo alrededor del 16.666%, para el tercero alrededor del 33.333%, y así sucesivamente. Además, al principio, serán invisibles. Cuando se cargue la página, aparecerán con una animación de deslizamiento de arriba hacia abajo o bien de abajo hacia arriba.

Elemento principal

El elemento main será a pantalla completa con contenido centrado horizontal y verticalmente. En este caso, contendrá solamente un título, pero si usas contenido cuya altura exceda la altura de la ventana gráfica, aparecerá una barra de desplazamiento. Inicialmente, solo el 20% será visible. Cuando se cargue la página, aparecerá todo el elemento.

Aquí están los estilos relevantes:

.panels {
    position: fixed;
    top: 0;
    left: 50%;
    width: 180vw;
    height: 100%;
    transform: translateX(-50%) skewX(-35deg);
    clip-path: circle(100%);
    z-index: 1;
    background: var(--lightgray);
}

.panels .panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--panel-width);
    transform: scaleY(0);
    transform-origin: top;
    background: var(--darkblue);
}

.panels .panel:nth-child(even) {
    transform-origin: bottom;
}

.panels .panel:nth-child(2) {
    left: calc(var(--panel-width) - 1px);
}

.panels .panel:nth-child(3) {
    left: calc(calc(var(--panel-width) * 2) - 2px);
}

.panels .panel:nth-child(4) {
    left: calc(calc(var(--panel-width) * 3) - 4px);
}

.panels .panel:nth-child(5) {
    left: calc(calc(var(--panel-width) * 4) - 5px);
}

.panels .panel:nth-child(6) {
    left: calc(calc(var(--panel-width) * 5) - 6px);
}

.page-main {
    display: flex;
    height: 100%;
    padding: 100px 15px;
    clip-path: circle(20%);
    overflow-y: auto;
    background: var(--darkblue);
}

.page-main > div {
    text-align: center;
    margin: auto;
}

@media (max-width: 1024px) {
    .panels {
        width: 200vw;
    }
}

@media screen and (max-width: 600px) {
    .panels {
        width: 235vw;
    }
}

Nota: Si revisas el valor de left de los paneles, notarás que hay una función exterior calc(). Su función es hacer que los paneles se superpongan un poco, y así evitar los bordes blancos entre los paneles adyacentes. Los valores restados (por ejemplo, -2px) provienen de prueba y error.

The white lines that appear between the panels

4. Activa las animaciones

Ahora pongamos a GSAP en el juego.

Para crear las animaciones, aprovecharemos Timeline, una herramienta de animación que nos brindará la posibilidad de crear una secuencia de interpolaciones/animaciones.

Primero, vamos a crear una línea de tiempo y estableceremos su estado como paused. De esta manera, las animaciones no se reproducirán de forma predeterminada. Cuando la página se haya cargado completamente, se reproducirán gracias a su método play().

En su interior, añadiremos una secuencia de interpolaciones utilizando su método to(). Este método puede recibir los siguientes parámetros:

El elemento del DOM que queremos animar.
Un objeto que contendrá las propiedades que deben ser animadas junto con sus respectivos valores finales. Este objeto puede recibir propiedades adicionales como duration, que controlará la duración de la animación en segundos.
La posición de la interpolación en la línea de tiempo. En otras palabras, cuándo debería ejecutarse esta interpolación. Si no le especificamos un valor, se añadirá al final de la línea de tiempo.

En nuestro caso, la cadena de animación será de la siguiente forma:

Aparecerán el primer y último panel. La duración de la animación será de 1 segundo.
Los otros paneles empezarán a aparecer 0.5 segundos antes del final de la línea de tiempo. La duración de la animación será de 0.5 segundos. Observa que omitimos la propiedad duration ya que su valor predeterminado es 0.5.
Todos los paneles empezarán a desaparecer con un retraso de 0.05 segundos entre ellos. Dicho esto, el primer panel se iniciará, después el segundo luego de un retraso de 0.05 segundos continuará, después el tercero después de un retraso de 0.1 segundos, y así sucesivamente. La duración de la animación será de 0.3 segundos.
El contenedor del panel desaparecerá mediante la propiedad clip-path. La duración de la animación será de 1 segundo.
Por último, el elemento main de la página empezará a incrementar a través de la propiedad clip-path 0.3 segundos antes del final de la línea de tiempo. La duración de la animación también será de 1 segundo.

Deájame explicarte un aspecto complejo sobre las dos primeras interpolaciones.

La animación de deslizamiento de todos los paneles finalizará al mismo tiempo. Recuerda que durará 1 segundo para el primer y último panel, mientras que 0.5 segundos para los demás, pero en este caso emepezará 0.5 segundos antes. Este comportamiento no está suficientemente claro en nuestra demostración porque los estilos ocultan una parte del primer y último panel. Pero, si eliminamos la inclinación del contenedor del panel y le asignamos width: 100vw, podremos probarlo. Analiza esta demostración en CodePen.

Aquí está el código JavaScript asociado:

const tl = gsap.timeline({ paused: true });

tl.to(".panels .panel:first-child, .panels .panel:last-child", {
  scaleY: 1,
  duration: 1
})
  .to(
    ".panels .panel:not(:first-child):not(:last-child)",
    { scaleY: 1 },
    "-=0.5"
  )
  .to(".panels .panel", {
    scaleY: 0,
    duration: 0.3,
    stagger: 0.05
  })
  .to(".panels", {
    clipPath: "circle(0%)",
    skewX: 0,
    duration: 1
  })
  .to(
    ".page-main",
    {
      clipPath: "circle(100%)",
      duration: 1
    },
    "-=0.3"
  );

window.addEventListener("load", function () {
  tl.play();
});

Naturalmente, puedes usar la consola del navegador para revisar el rastro que deja el plugin.

Extra

Podemos utilizar el método duration() de la línea de tiempo para recuperar su duración. En nuestro caso, serán 3.25 segundos. Conozcamos el origen de este número:

1 segundo de la primera interpolación
0 segundos de la segunda, ya que terminará al mismo tiempo que la primera.
0.55 segundos de la tercera, ya que el último panel empezará a desaparecer con un retraso de 0.25 segundos (0.05 segundos x 5). Asi que, el tiempo total saldrá de la suma del retraso y la duración de la animación (es decir, 0.25 + 0.3).
1 segundo de la cuarta
0.7 segundos de la última, ya que comenzará 0.3 segundos antes del final de la línea de tiempo.

Conclusión

¡Felicidades, amigos! Hemos logrado crear una atractiva animación de carga de página aprovechando la biblioteca de animaciones GSAP. Este proyecto no es más que una pequeñísima muestra de las capacidades de GSAP. No dudes en ampliarla de acuerdo a tus necesidades (por ejemplo, hacer que las interpolaciones sean más rápidas) y así ampliar tus conocimientos sobre GSAP. Aún mejor, trata de incorporarla en una biblioteca de transiciones de página como barba.js.

Si deseas más tutoriales sobre GSAP o tutoriales relacionados con otras bibliotecas de animación, háznoslo saber a través de las redes sociales.

Como siempre, ¡muchas gracias por leer!