Does removing DOM Element remove associated Tweens?

[Madhav-Malhotra]

Let's say I create a div element like this:

const div = document.createElement("div");
document.body.appendChild(div);

And then I create a Tween for that like this:

createjs.Tween.get(div, {loop: true})
  .to({x: 100}, 1000)
  .to({x: 0}, 1000)

One way I could remove the Tween would be using the '.removeTweens()` method. Like this:

createjs.Tween.removeTweens(div);

But what happens if I delete the div DOM element itself? Are the associated Tweens also removed?

div.remove() // What happens to Tween associated with div?

[trusktr]

Hello!

This is the wrong Tween library you are asking about, but the following answer will apply to both anyway.

There is Tween.js (you're looking at it right now) started in May 2010, and TweenJS started in March 2011. So our name wins. 😛

Anyway, to answer your question: no, tweens (from either lib) do not automatically stop when you remove a DOM element. They can not make this assumption because they do not know what you are animating (you could animate the properties of any object other than a DOM element).

So, if you happen to be animating properties on a DOM element (which doesn't make sense unless you also use CSSPlugin with TweenJS (not Tween.js)), then if you want to remove the element you also need to stop the tween.

// TweenJS
Tween.get(theElement).to(...)

// later
theElement.remove() // remove it from DOM
createjs.Tween.removeTweens(theElement) // clean up the tweens

// Tween.js
new Tween(theElement).to(...).start()

// later
theElement.remove() // remove it from DOM
tween.stop()

Tween.js has a more modern code base (ES Modules using class syntax, and written in TypeScript) and simpler API in this case (f.e. tween.stop()).

[Madhav-Malhotra]

@trustkr I'm sorry for the confusion! Thank you for answering still 😁 I really appreciate your quick response!

[trusktr]

You're welcome! Happy to help since you landed here anyway. :)