Je me suis inspiré de l'écran de sélection des personnages de Valorant pour créer cet effet de révélation. Cliquez sur les portraits des personnages ou utilisez vos touches fléchées pour interagir !

La mise en place

Pour obtenir cet effet, nous allons utiliser AnimeJS pour les animations d'images et Granim.js pour les transitions de dégradé d'arrière-plan

Nous utilisons trois images au total : la découpe PNG du personnage principal et deux versions de superposition colorée. L'une de ces découpes colorées sera en retard par rapport à l'image principale et l'autre tirera légèrement vers l'avant, nous donnant cet effet élastique. L'arrière-plan n'est qu'un élément de canevas que Granim.js ciblera.

Commencer

Tout d'abord, nous allons créer un écouteur d'événement qui déplacera l'image de notre agent lorsque nous appuierons sur la touche fléchée droite :

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

Dans notre fonction animationRight(), nous allons utiliser AnimeJS pour cibler le conteneur de pile à trois images de notre agent et le déplacer de de droite à gauche :

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

Après cela, nous ciblons la couleur que nous voulons prendre en retard et l'animons. Gardez à l'esprit que toutes les images ont position: absolue et transform: translateX(-50%) afin d'être empilées et centrées, donc leur valeur finale de translation doit être de -50%, et non de 0. Puisque nous passons de de droite à gauche, cela signifie que l'image doit démarrer à une valeur supérieure à -50 %.

Vous pouvez jouer avec l'assouplissement, mais je trouve préférable d'empêcher ce premier traceur de rebondir ; sinon, l'animation semble un peu brouillonne. Nous utiliserons l'autre traceur pour vendre le « recul ». Dans les deux cas, nous utilisons l'incroyable assouplissement spring() d'AnimeJS, qui permet d'obtenir facilement des résultats « importants ».

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

Pour terminer, nous faisons la même chose avec l'autre image, mais nous la faisons aller "plus vite" que l'image principale avant d'arriver à la même position, lui donnant une sensation de "recul":

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

Dégradés !

En utilisant Granim.js, vous pouvez configurer un arrière-plan dégradé soigné, et il gérera les transitions de dégradé ou toutes les animations que vous souhaitez utiliser pour votre arrière-plan

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

En gros, tout ce dont vous avez besoin est de définir différents « états » et lorsque vous souhaitez changer de couleur (par exemple lors de la sélection d'un nouvel agent), il vous suffit d'appeler graanimInstance.changeState('new-state'); et c'est tout!