Stop an animation

[Alf21]

Is it possible to stop an animation from inside of another animation?

I created two timelines. The first one is infinite and the second one has two animations. After finishing animation 2, i want to stop animation 1 and go to the next step.

Thats currently not possible i think, so i tried another thing: I set the autoplay of anim1 to false and started it with 'anim1.play()' when anim2.begin callback is called. Then im waiting for callback anim2.complete to create a third animation.

But it is also buggy, if i set an animation to autoplay = false, i can't start it from any event or anything else...

Any solutions?

[juliangarnier]

Please provide some code.

[pakx]

I have a similar "issue" -- is there a way to "cancel" a currently-playing animation? I didn't notice anything in the docs, or on looking at the properties of the return value of anim(...).

(Separately, awesome library -- many thanx!)

[snc]

@pakx You can call pause() on the return value of anim(...).

[pakx]

@snc, yes, I saw pause() ... but I assume that only "pauses" an animation, possibly to be continued later, correct? What if I want to cancel/kill it completely, including having it release whatever resources it's holding (timers, memory, etc)?

[wintercounter]

I'm pretty much amazed that there is no option for this. I'm converting my animation from TweenMax. It had TweenMax.killTweensOf(el);. I have multiple hover animations and i want to stop all the non-hovered elements from animating.

[juliangarnier]

@pakx @wintercounter See anime.remove(el) https://github.com/juliangarnier/anime/#animeremovetarget

[ericmorand]

@juliangarnier what if I only want to stop one of the animations and not all of them? pause() will only pause the animation and let it hanging around in memory.

[juliangarnier]

I don't think it's a problem. Have you noticed performance issues using .pause()?

[akash-pal]

pause() doesn't work for me after i start the animation

[garrettmaring]

If you trigger play after pausing will it resume from the point where it was paused? This indicates to me that there is a distinct use for a cancel.

[Cristy94]

Any news about this? There is no animation.stop() or animation.destroy() ?

[AaronBeaudoin]

It seems that removing animations from the anime.running array can effectively cancel them.

Setting anime.running.length to 0 seems to stop all animations. It seems you can also pop animations from the array and they will stop. Beware though, as anime.running = [] seems to do nothing. You must modify the existing array, not replace it.

It appears that for popped animations animation.completed will remain false and animation.finished will remain unresolved, likely because animation.currentTime, and animation.progress become frozen. The animation seems effectively dead, AKA cancelled or stopped.

I don't know if this is the intended way to do this, but I'm pretty sure its effects are what we are all looking for here. Hopefully there are no unseen side effects.

@juliangarnier If this is how we are supposed to do this could you add it to the docs? :)

[jameskerr]

If you want to cancel an animation with only the animation instance, I wrote a function that will gather all the targets, to then call anime.remove on each one. However, it would be much easier with an api as suggested above like instance.cancel().

function getTargets(ani) {
  return ani.children.reduce(
    (all, one) => all.concat(getTargets(one)),
    ani.animatables.map((a) => a.target)
  )
}

function cancel(ani) {
  getTargets(ani).forEach(anime.remove)
}

let ani = anime.timeline(...).add(...).add(...)

// Later on...

cancel(ani)

[lukejagodzinski]

I'm surprised that this is not implemented yet. It's 2 years old issue and solution is pretty simple. @juliangarnier please implement this feature

[SupahSprinkle]

I stumbled upon this looking for something else. I just started using anime.js for a class and needed to stop an animation. Eventually this animation will be triggered off of a check box.

I remove the animation by essentially removing the object that is being animated. Sort of hacky, but it works like a charm.

[lukejagodzinski]

Actually solution with anime.remove(el) kinda works but from API perspective it's ugly. It should be done on the instance level as this one removes element from all the instances which for some people might be wrong

[justanotherkevin]

You can use .pause() I had to update to new version also here's the CDN: https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js https://animejs.com/documentation/#playPause

[dangelion]

Any news on a destroy like method? I just can't remove the target element.

[mracette]

The issue with anime.remove(el) is that an attached callback such as change will continue running even with no targets. So it's not a true stop.

[wintercounter]

This still keeps popping up in my life, now with a React project. It's causing huge memory leaks. Simply having setState in any animejs callback will force the browser to keep my component in memory and there is just no way to clean up created timelines...

[akbr]

Formalizing and bumping @AaronBeaudoin 's https://github.com/juliangarnier/anime/issues/188#issuecomment-522206934, which seems to be the best method we have right now:

function cancelAnimation (animation) {
  let activeInstances = anime.running;
  let index = activeInstances.indexOf(animation);
  activeInstances.splice(index, 1);
}

Caveats:

• Will only work for playing animations, not paused ones.
• complete will stay false, and the finished promise will not resolve.

[yellow1912]

I really hope we have a destroy method on the anime instance. Is there any possibility?

[xJkit]

anime.destory() is necessary.

[Cristy94]

Why is this closed if the issue is not solved?

[baba43]

This is pretty essential for properly integrating this into frameworks like React, isn't it?

[Gameghostify]

+1, this would be great to have

[yougotashovel]

Finding when a React component remounts, the animation timeline gets glitchy. Having a destroy option like GSAP would help a lot.

Then I could destroy the animation or timeline on unmount.

[juliangarnier]

Will work on that for the next release!

[xiziliang]

Looking forward toanime.destory

[angelafox777]

This is the only thing that finally worked for me:

const runningAnims = anime.running; while (runningAnims.length > 0) { runningAnims.pop(); }