Me inspiré en la pantalla de selección de personajes de Valorant para crear este efecto de revelación. ¡Haz clic en los retratos de los personajes o usa las teclas de flecha para interactuar!

La puesta en marcha

Para lograr este efecto, usaremos AnimeJS para las animaciones de imágenes y Granim.js para las transiciones de gradiente de fondo

Estamos utilizando tres imágenes en total: el recorte PNG del personaje principal y dos versiones superpuestas de colores. Uno de estos recortes de colores quedará rezagado con respecto a la imagen principal y el otro se disparará ligeramente hacia adelante, lo que nos dará este efecto elástico. El fondo es solo un elemento del lienzo al que se dirigirá Granim.js.

Empezando

Primero, vamos a crear un detector de eventos que moverá la imagen de nuestro agente cuando presionemos la tecla de flecha derecha:

document.addEventListener("keydown", function (event) {
  if (event.key === "ArrowRight") {
    animationRight();
  }
});

Dentro de nuestra función AnimationRight(), usaremos AnimeJS para apuntar al contenedor de pila de tres imágenes de nuestro agente y moverlo de de derecha a izquierda:

anime({
        targets: ".agent-container",
        translateX: [
          "250px", // Initial state
          "0px" // Final state
        ],
        easing: "easeOutCubic",
        duration: 250
      });

Después de eso, seleccionamos el color que queremos retrasar y lo animamos. Tenga en cuenta que todas las imágenes tienen posición: absoluta y transformación: traducirX(-50%) para poder apilarse y centrarse, por lo que su valor final de traducciónX debe ser -50%, no 0. Dado que nos estamos moviendo desde de derecha a izquierda, esto significa que la imagen debe comenzar con un valor mayor que -50%.

Puedes jugar con la relajación, pero creo que es mejor evitar que este primer trazador rebote; de lo contrario, la animación parece un poco desordenada. Usaremos el otro trazador para vender el "retroceso". En ambos casos, utilizamos la increíble relajación spring() de AnimeJS, que facilita la obtención de resultados "importantes".

      anime({
        targets: ".agent-fb-B",
        translateX: [
          "-32%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 40, 0)",
        duration: 100
      });

Para finalizar, hacemos lo mismo con la otra imagen, pero la hacemos ir 'más rápido' que la imagen principal antes de llegar a la misma posición, dándole una sensación de 'retroceso':

  anime({
        targets: ".agent-fb-S",
        translateX: [
          "-46%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 10, 20)",
        duration: 150
      });

¡Degradados!

Con Granim.js, puedes configurar un fondo degradado ordenado y manejará las transiciones de degradado o cualquier animación que quieras usar para tu fondo

var granimInstance = new Granim({
    element: '#canvas-interactive',
    direction: 'diagonal',
    states : {
        "default-state": {
            gradients: [
                ['#B3FFAB', '#12FFF7'],
            ]
        },
        ...
    }
});

Básicamente, todo lo que necesitas es definir diferentes 'estados' y cuando quieras cambiar los colores (por ejemplo, al elegir un nuevo agente) solo tienes que llamar a granimInstance.changeState('new-state'); ¡y eso es!