На создание этого эффекта раскрытия меня вдохновил экран выбора персонажа в Valorant. Нажимайте на портреты персонажей или используйте клавиши со стрелками для взаимодействия!

Установка

Чтобы добиться этого эффекта, мы будем использовать AnimeJS для анимации изображений и Granim.js для градиентных переходов фона

Всего мы используем три изображения: вырез главного героя в формате PNG и две цветные версии с наложением. Один из этих цветных вырезов будет отставать от основного изображения, а другой будет немного выдвигаться вперед, создавая пружинящий эффект. Фон — это просто элемент холста, на который будет нацелен Granim.js.

Начиная

Во-первых, мы собираемся создать прослушиватель событий, который будет перемещать изображение нашего агента, когда мы нажимаем клавишу со стрелкой вправо:

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

Внутри нашей функции анимацииRight() мы будем использовать AnimeJS, чтобы нацелиться на контейнер стека из трех изображений нашего агента и переместить его из справа налево:

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

После этого мы нацеливаемся на цвет, от которого хотим отставать, и анимируем его. Имейте в виду, что все изображения имеют позицию: Absolute и Transform: TranslateX(-50%) для укладки и центрирования, поэтому их окончательное значение TranslateX должно быть -50%, а не 0. Поскольку мы переходим от справа налево, это означает, что изображение должно начинаться со значения, превышающего -50%.

Вы можете возиться с замедлением, но я считаю, что лучше не допускать подпрыгивания этого первого трассера; в противном случае анимация выглядит немного беспорядочной. Мы воспользуемся другим трассером, чтобы продать «отдачу». В обоих случаях мы используем невероятное смягчение Spring() в AnimeJS, которое позволяет легко добиться «весомых» результатов.

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

Чтобы завершить это, мы проделываем то же самое с другим изображением, но заставляем его двигаться «быстрее», чем основное изображение, прежде чем прийти в ту же позицию, придавая ему ощущение «отдачи»:

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

Градиенты!

Используя Granim.js, вы можете настроить аккуратный градиентный фон, и он будет обрабатывать градиентные переходы или любую анимацию, которую вы хотите использовать в качестве фона.

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

По сути, все, что вам нужно, это определить различные «состояния», и когда вы хотите изменить цвета (например, при выборе нового агента), вам просто нужно вызвать granimInstance.changeState('new-state'); вот и все!