Jump to content
Search Community

dispose of a TimelineMax

keldon test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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
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.
  • 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:

_________________________________________________________________

 

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

  • 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.
×
×
  • Create New...