How to set animation progress in anime.js/velocity.js etc.?

Question

JavaScript

There is such an animation (using anime.js as an example):

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

It is necessary to set a certain progress of this animation depending on the scrolling of the screen (or a certain interval).
For example:

• at 20% scroll animation should be given as"opacity:0.9;transform:translateX(40px);"
  
• at 50% scroll -"opacity:0.75;transform:translateX(100px);"
  
• etc.
  

I would like to avoid manually calculating the values ​​for each property in the animation.
Can this be done natively in anime.js/velocity.js or similar libraries?

There gsap.jsis a method .progress()in , which generally does what I need. But I would like to know if there is such functionality in less heavy libraries.

Answer 1

With these libraries, you can animate the value of properties from one to another in a specified amount of time. The value from and to will need to be calculated. At least extreme.