Как задать прогресс анимации в anime.js/velocity.js?

Имеется такая анимация (на примере anime.js):

anime({
  targets: '.selector',
  opacity: 0.5,
  translateX: 200,
  duration: 1,
});

Необходимо задать определенный прогресс этой анимации в зависимости от прокрутки экрана (или определенного интервала).

Например:

  • при 20% прокрутки анимация должна задаваться как "opacity:0.9;transform:translateX(40px);"
  • при 50% прокрутки - "opacity:0.75;transform:translateX(100px);"
  • и т.д.

Хотелось бы избежать ручного высчитывания значений для каждого свойства в анимации.

Можно ли этого добиться встроенными средствами в anime.js/velocity.js или им подобных библиотеках?

В gsap.js есть метод .progress(), который в целом делает то, что мне нужно. Но хотелось бы узнать есть ли такой функционал в менее тяжелых библиотеках.


Ответы (0 шт):