I'm trying to understand what's the best way to use TweenLite/TweenMax.

• Is it useful to reference all my tweens with the same variable?
• After killing the tween with the relative public method, do I have to set the reference to null to improve the garbage collecting disposal?

Below there is a well mented example:

$(document).ready(function () {
    var elementOne = $('#elementOne');
    var elementTwo = $('#elementTwo');
    var myTween;

    // is it useful to overwrite the variable?
    myTween = TweenMax.to(elementOne, 1, {
        opacity: 0
    });
    myTween = TweenMax.to(elementTwo, 1, {
        left: 0,
        onComplete: destroy
    });

    function destroy () {
        // suggested on tweenmax docs
        // the console.log still returns me the object
        myTween.kill();
        console.log(myTween);

        // is it required for garbage collecting?
        // now the console.log returns me null
        myTween = null;
        console.log(myTween);

        // and then...jQuery GC friendly remove
        elementOne.remove();
        elementTwo.remove();
    }
});

I'm trying to understand what's the best way to use TweenLite/TweenMax.

• Is it useful to reference all my tweens with the same variable?
• After killing the tween with the relative public method, do I have to set the reference to null to improve the garbage collecting disposal?

Below there is a well mented example:

$(document).ready(function () {
    var elementOne = $('#elementOne');
    var elementTwo = $('#elementTwo');
    var myTween;

    // is it useful to overwrite the variable?
    myTween = TweenMax.to(elementOne, 1, {
        opacity: 0
    });
    myTween = TweenMax.to(elementTwo, 1, {
        left: 0,
        onComplete: destroy
    });

    function destroy () {
        // suggested on tweenmax docs
        // the console.log still returns me the object
        myTween.kill();
        console.log(myTween);

        // is it required for garbage collecting?
        // now the console.log returns me null
        myTween = null;
        console.log(myTween);

        // and then...jQuery GC friendly remove
        elementOne.remove();
        elementTwo.remove();
    }
});

• javascript
• performance
• garbage-collection
• gsap

1 Answer 1

You don't need to do anything special to make a tween (or timeline) available for gc other than what you'd normally do for any JS object. In other words, if you maintain a reference in your own code to an instance, it'll stick around (otherwise your code could break). But you do NOT need to specifically kill() a tween. A lot of effort has gone into GSAP to ensure that things are optimized and headache-free. The engine will automatically release pleted tweens for garbage collection when necessary. And yet a tween will still work if you maintain a reference and restart() it, for example.

Just because you call kill() on a tween instance, that doesn't force the browser to run its garbage collection routine. It doesn't null your variable either. That's just how JavaScript works (and that's a good thing). It has nothing to do with TweenLite/Max specifically.

Also keep in mind that you don't need to store any tween instances in variables. The only time it's helpful is if you need to control the tween later (or insert it into a timeline or something like that). Typically it's fine to just call TweenMax.to(...) without storing the result in a variable.

Does that clear things up?