Share Posted April 15, 2014 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. 1 Link to post Share on other sites
Share Posted April 15, 2014 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. 3 Link to post Share on other sites
Share Posted April 15, 2014 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 3 Link to post Share on other sites