@chegcheg

Как задать прогресс анимации в 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(), который в целом делает то, что мне нужно. Но хотелось бы узнать есть ли такой функционал в менее тяжелых библиотеках.
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега JavaScript
Этими библиотеками ты можешь анимировать значение свойств от одного до другого за указанный промежуток времени. Значение от и до надо будет высчитывать. Как минимум крайние.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы