Как задать прогресс анимации в 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(), который в целом делает то, что мне нужно. Но хотелось бы узнать есть ли такой функционал в менее тяжелых библиотеках.