Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

dispose of a TimelineMax

Recommended Posts

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.


  • Like 1
Link to comment
Share on other sites

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
// 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.
  • Like 3
Link to comment
Share on other sites

Hello keldon,


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





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



//kill the entire animation:

//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]);





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



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





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



<div id="d1">
<div id="d2">
<img src="photo.jpg" id="image" />
<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") );





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




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

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.