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

Question

[chegcheg]

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

Answer 1

[profesor08]

Этими библиотеками ты можешь анимировать значение свойств от одного до другого за указанный промежуток времени. Значение от и до надо будет высчитывать. Как минимум крайние.

Comments

[chegcheg]

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

[profesor08]

chegcheg, это ничем не поможет в интеграции с прокруткой

[chegcheg]

Я ведь написал, что метод .progress() делает то, что нужно.

1. Задаем анимацию:

let ic = gsap.to('.intro__cont', {
  opacity: '0',
  scale: '.7',
  paused: true
});

2. На основе нативной прокрутки либо сторонней библиотеки прокрутки (мой случай) высчитываем progress в интервале между 0 и 1.

let prog = .5; // в ходе вычислений получаем это значение

3. Полученный прогресс применяем к анимации:
ic.progress(prog);

4. Анимация "проигрывается" до 50%.

[profesor08]

chegcheg, и в результате получишь то-же самое, что и если бы задавал css свойства вручную, а свойство указал бы в transition.
Ведь если еще чуть подумать, то это .5 можно помножить на разницу между начальные значением и конечным и прибавить к начальному. Таким образом окажется, что эти библиотеки просто не нужны, для решения данной задачи.