Anime: [Feature request] Stop looping when a loop end

[bofeiw]

Is your feature request related to a problem? Please describe.
I'm always frustrated when I want a looping animation to stop once current loop finish.
For example, I created a animation:

const anim = anime({
  ...
  loop: true,
});

And after some loops and the job is done, I want the animation to stop, but not stop immediately since it need to animate back to its original state(scale, translations). I want it to stop when the current loop finish.

Describe the solution you'd like
I would like to do something like this:

anim.pauseOnLoopComplete();

Concise to do the job.

Describe alternatives you've considered
Currently, I found an alternative to do the job using loopComplete and set a variable outside the anime and change it later on:

let done = false;
const anim = anime({
    ...
    loop: true,
    loopComplete: (anim) => {
      if (done) {
        anim.pause();
      }
})

setTimeOut(() => done = true, 1000);

It works, but the code is very messy.

Additional context
Appreciate your work on animeJS and will be happy if you consider this feature!

[mesqueeb]

I need this too!

[edreesjalili]

Still not ideal but you could wrap the functionalty in a wrapper function if you're consuming it often.

function pausableLoopAnime({loopComplete, ...options}) {
  const instance = anime({
    ...options,
    loop: true,
    loopComplete: function(anim) {
        if(instance.shouldPause) anim.pause();
        if(typeof loopComplete === 'function') loopComplete(anim);
    }
  });
  instance.pauseOnLoopComplete = () => instance.shouldPause = true;
  return instance;
}

const animation= pausableLoopAnime({
  targets: '.polymorph',
  points: [
      { value: '215, 110 0, 110 0, 0 47.7, 0 67, 76' },
      { value: '215, 110 0, 110 0, 0 0, 0 67, 76' }
  ],
  easing: 'easeOutQuad',
  duration: 1200,
});

setTimeout(animation.pauseOnLoopComplete, 100)

[kn0wn]

I like this idea, I'll take a look at the implementation this weekend.

[agrogers]

I was looking for this functionality to. I stop my animation when a user does something but if they are really fast the animated element can be very big and not at all the size it is supposed to return to.