dispose of a TimelineMax

[keldon 1 Likes (Newbie)]

I am wanting to be sure that I am going about cleaning up a TimelineMax completely.

Can you please review and let me know if this code leaves anything straggling or is otherwise in need of improvement?

 

this.timeline.clear( true );
this.timeline.eventCallback( 'onComplete', null );          // : Function
this.timeline.onCompleteParams.length = 0;                  // : Array
this.timeline.onCompleteScope = null;                       // : Object
this.timeline.eventCallback( 'onRepeat', null );            // : Function
this.timeline.onRepeatParams.length = 0;                    // : Array
this.timeline.onRepeatScope = null;                         // : Object
this.timeline.eventCallback( 'onReverseComplete', null );   // : Function
this.timeline.onReverseCompleteParams.length = 0;           // : Array
this.timeline.onReverseCompleteScope = null;                // : Object
this.timeline.eventCallback( 'onStart', null );             // : Function
this.timeline.onStartParams.length = 0;                     // : Array
this.timeline.onStartScope = null;                          // : Object
this.timeline.eventCallback( 'onUpdate', null );            // : Function
this.timeline.onUpdateParams.length = 0;                    // : Array
this.timeline.onUpdateScope = null;                         // : Object
this.timeline.tweens.length = 0;                            // : Array
this.timeline = null;

Thank you for any guidance you can give me.

 

[jamiejefferson 1,193 Likes (Superhero)]

If you are just looking to destroy a stored timeline for garbage collection, at most you only need to kill() it (although not always necessary). Replace alllllll of that with

// kills the timeline to force it to completion in case it hasn't already
this.timeline.kill();
// set to null so the reference is removed
this.timeline = null;
// tada! all done!

GSAP is already optimised for garbage collection at every step. As long as you aren't holding references to your tweens/timelines they will clean up automatically. Essentially, once a free-standing (i.e. not a child of another timeline you've created) tween or timeline completes, it is opened up for garbage collection as soon as the browser wants to, as long as you don't have your own reference to it.

[Jonathan 5,316 Likes (Superhero)]

Hello keldon,

 

To add to Jamies Awesome advice.. Here is a list of available kill methods:

_________________________________________________________________

 

kill()

 

Kills the animation entirely or in part depending on the parameters.

 

http://api.greensock.com/js/com/greensock/core/Animation.html#kill()

//kill the entire animation:
myAnimation.kill();

//kill only the "x" and "y" properties of the animation (all targets):
myAnimation.kill({x:true, y:true});

//kill all parts of the animation related to the target "myObject" (if the tween has multiple targets, the others will not be affected):
myAnimation.kill(null, myObject);

//kill only the "x" and "y" properties of animations of the target "myObject":
myAnimation.kill({x:true, y:true}, myObject);

//kill only the "opacity" properties of animations of the targets "myObject1" and "myObject2":
myAnimation.kill({opacity:true}, [myObject1, myObject2]);

_________________________________________________________________

 

killAll()

 

Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first.

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killAll()

//kill everything
TweenMax.killAll();
//kill only tweens, but not delayedCalls or timelines
TweenMax.killAll(false, true, false, false);
//kill only delayedCalls
TweenMax.killAll(false, false, true, false);

_________________________________________________________________

 

killChildTweensOf()

 

Kills all tweens of the children of a particular DOM element, optionally forcing them to completion first.

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killChildTweensOf()

<div id="d1">
<div id="d2">
<img src="photo.jpg" id="image" />
</div>
</div>
<div id="d3"></div>

TweenMax.to( document.getElementById("d2"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("image"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("d3"), 1, {css:{left:100}});
//only kills the first 2 tweens because those targets are child elements of the "d1" DOM element.
TweenMax.killChildTweensOf( document.getElementById("d1") );

_________________________________________________________________

 

killTweensOf()

 

Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function.

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killTweensOf()

TweenMax.killTweensOf(myObject);

TweenMax.killTweensOf(myObject, {opacity:true, x:true});

_________________________________________________________________

 

You could use any of the above GSAP methods to kill the animation in part or entirely depending on the parameters and what method you use.

 

Hope this is helpful