juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
49.26k stars 3.66k forks source link

Removing animation objects #784

Open elwyos opened 2 years ago

elwyos commented 2 years ago

Is there a way to remove animation objects after they have been made?

The reason I'm asking this, is because I'm using animejs to make a bunch of floating divs with createElement (a shoddy particle effect with icons of confetti). At the end of the anime.js animation, I added the following:

     complete: function(anim){
        thingo.remove();
     }

After making sure that the HTMLDomElement was indeed removed, I started stress testing these "particles". I noticed that after creating these animations for a while (that is, I made 50, waited for them to clear, then made 50 again etc..) the animations start to lag.

Am I missing some important instructions somewhere in animejs, for example if I'm supposed to call a remove() or clear() or something along that line at the end of animations? Or should I just depend on the garbage collector?

There are also situations where I may need to remove the items being animated from the DOM before the animation finishes, and I'm guessing that also means I'll have to remove the animations manually. But how does one do that?

different55 commented 2 years ago

Wrt your second question, you can use this to remove the animation from a single element. Does removing all targets from an animation object help your performance problem?