Destroy timeline

[glebmachine]

Hi!

How do i should properly destroy TimelineLite/TimelineMax? I need to clean timeline and clean up style-property of all DOM elements.

I'm trying to find proper (means canonical) way to do that. I found huge workarounds for that (kill tween, find nodes with _gsTweenId and TweenLite.killTweenOf([DOMElement]) for this object.

I hope gsap have proper way to do that (need to recreate timelines in adaptive design on each project i have)

[glebmachine]

Other way - is to get all children and concat their targets

Both workarounds below:

import TweenLite from 'TweenLite';

function iterate(task, node) {
  for (var x = 0; x < node.childNodes.length; x++) {
    var childNode = node.childNodes[x];

    task(childNode);

    if (childNode.childNodes.length > 0) {
      iterate(task, childNode);
    }
  }
}

module.exports = {

  cleanTimeline(timeline) {
    var targets = [];
    timeline.getChildren().forEach((tween) => targets.push(...tween.target.toArray()));

    targets.forEach(node => {
      TweenLite.killTweensOf(node);
      TweenLite.set(node, { clearProps:'all' });
    });
  },

  cleanNode(el) {
    var element = el || document.body;

    iterate(function(node) {
      if (node._gsTransform) {
        TweenLite.killTweensOf(node);
        TweenLite.set(node, { clearProps:'all' });
      }
    }, element);
  }

};

[jackdoyle]

To kill the timeline and its child tweens, you can simply call timeline.kill(), but if you're trying to revert all the properties to the way they were at the beginning of the timeline, you could timeline.seek(0).kill() and if you're literally trying to erase all the inline styles of all elements that had any tweens in the timeline, you could do exactly what you were suggesting - use getChildren() and iterate through those tweens and use clearProps:"all" but frankly that seems a little strong-handed for most situations. Totally up to you though.