I have animation like this (anime.js example):
anime({
targets: '.selector',
opacity: 0.5,
translateX: 200,
duration: 1,
});
Then i need to set progress of this animation depending on page scroll position (or any js library for scrolling).
For example:
"opacity:0.9;transform:translateX(40px);""opacity:0.75;transform:translateX(100px);"I'd like to avoid calculating every value of animation by myself.
Is there build-in tools in anime.js/velocity.js or libraries like them?
gsap.js has .progress() method that works as i need, but i'd like to find lighter library for this purpose.
Yeah, anime.js has progress seeking functions. The one you're looking for is seek(). It's used like this:
var animation = anime({
targets: '.selector',
opacity: 0.5,
translateX: 200,
duration: 1,
});
animation.seek(0.2 * animation.duration);
animation.seek(0.5 * animation.duration);
It's done in milliseconds, so you have to multiply by the duration of the animation. But for your purposes, just plug in your scroll progress within a scroll event handler and it'd all work nicely.
animation.seek(scrollProgress * animation.duration);