anime Stop an animation

Stop an animation

Open Alf21 opened this issue 7 years ago • 30 comments

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?

Jun 12 '17 17:06 Alf21

Please provide some code.

Jun 15 '17 07:06 juliangarnier

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

Jul 02 '17 22:07 pakx

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

Jul 03 '17 05:07 snc

@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)?

Jul 03 '17 05:07 pakx

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.

Aug 18 '17 09:08 wintercounter

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

Aug 21 '17 11:08 juliangarnier

@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.

Nov 05 '17 21:11 ericmorand

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

Nov 06 '17 03:11 juliangarnier

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

Apr 03 '18 06:04 akash-pal

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.

Nov 06 '18 18:11 garrettmaring

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

Jan 10 '19 13:01 Cristy94

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? :)

Aug 17 '19 05:08 AaronBeaudoin

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)

Nov 11 '19 18:11 jameskerr

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

Nov 27 '19 13:11 lukejagodzinski

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. RemoveAnim

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

Nov 28 '19 03:11 SupahSprinkle

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

Nov 29 '19 22:11 lukejagodzinski

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

Dec 11 '19 15:12 justanotherkevin

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

Dec 16 '19 10:12 dangelion

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.

Feb 08 '20 18:02 mracette

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...

Mar 26 '20 09:03 wintercounter

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: