Valorant Character Selection Character Reveal Effect

I was inspired by Valorant's character selection screen to create this reveal effect. Click the character portraits or use your arrow keys to interact!

The Setup

To achieve this effect, we are going to use AnimeJS for the image animations and Granim.js for the background gradient transitions

We are using three images total: the main character PNG cutout and two colored overlay versions. One of these colored cutouts will lag behind the main image, and the other will shoot just slightly forward, giving us this springy effect. The background is just a canvas element that Granim.js will target.

Getting Started

First, we are going to create an event listener that will move our agent's image when we press the right arrow key:

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

Inside our animationRight() function, we are going to use AnimeJS to target our agent's three-image stack container and move it from right to left:

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

After that, we target the color we want to lag behind and animate it. Keep in mind that all images have position: absolute and transform: translateX(-50%) in order to be stacked and centered, so their final translateX value should be -50%, not 0. Since we are moving from right to left, this means the image has to start at a bigger value than -50%.

You can mess around with the easing, but I find it best to keep this first tracer from bouncing around; otherwise, the animation looks a little bit messy. We'll use the other tracer to sell the 'recoil'. In both instances, we are using AnimeJS's incredible spring() easing, which makes it easy to achieve 'weighty' results.

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

To finish it off, we do the same thing to the other image, but we make it go 'faster' than the main image before coming to the same position, giving it a 'recoily' feeling:

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

Gradients!

Using Granim.js, you can set up a neat gradient background, and it'll handle the gradient transitions or any animations that you want to use for your background

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

Basically all you need is to define different 'states' and when you want to change colors (for example when picking a new agent) you just have to call granimInstance.changeState('new-state'); and that's it!