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

Question

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:

• on 20% of scroll have to be set as "opacity:0.9;transform:translateX(40px);"
• on 50% of scroll - "opacity:0.75;transform:translateX(100px);"
• etc.

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.

Answer 1

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);