Me inspirei na tela de seleção de personagens do Valorant para criar esse efeito de revelação. Clique nos retratos dos personagens ou use as teclas de seta para interagir!

A configuração

Para conseguir esse efeito, usaremos AnimeJS para as animações de imagem e Granim.js para as transições de gradiente de fundo

Estamos usando três imagens no total: o recorte PNG do personagem principal e duas versões de sobreposição coloridas. Um desses recortes coloridos ficará atrás da imagem principal e o outro irá disparar um pouco para frente, dando-nos esse efeito elástico. O plano de fundo é apenas um elemento de tela que o Granim.js terá como alvo.

Começando

Primeiro, vamos criar um ouvinte de evento que moverá a imagem do nosso agente quando pressionarmos a tecla de seta para a direita:

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

Dentro de nossa função AnimationRight(), usaremos AnimeJS para direcionar o contêiner de pilha de três imagens do nosso agente e movê-lo da da direita para a esquerda:

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

Depois disso, direcionamos a cor que queremos deixar para trás e a animamos. Tenha em mente que todas as imagens possuem position: absoluto e transform: translateX(-50%) para serem empilhadas e centralizadas, então seu valor final de translateX deve ser -50%, não 0. Já que estamos passando de da direita para a esquerda, isso significa que a imagem deve começar com um valor maior que -50%.

Você pode mexer na flexibilização, mas acho melhor evitar que esse primeiro rastreador salte; caso contrário, a animação parecerá um pouco confusa. Usaremos o outro rastreador para vender o ‘recoil’. Em ambos os casos, estamos usando a incrível suavização spring() do AnimeJS, que facilita a obtenção de resultados 'pesados'.

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

Para finalizar, fazemos a mesma coisa com a outra imagem, mas fazemos com que ela vá 'mais rápido' que a imagem principal antes de chegar à mesma posição, dando-lhe uma sensação de 'recuo':

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

Gradientes!

Usando Granim.js, você pode configurar um plano de fundo gradiente elegante e ele lidará com as transições gradientes ou quaisquer animações que você deseja usar como plano de fundo

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

Basicamente tudo que você precisa é definir diferentes 'estados' e quando quiser mudar as cores (por exemplo ao escolher um novo agente) basta chamar granimInstance.changeState('new-state'); e é isso!