how to killall tween of one game?

[TrinhVanDan]

I have two games on one tab. How to killAll tween of one game not effect other game. I use TweenMax.killAll(), it stop all tween of two games. Thanks

[Sahil]

You can use killTweensOf instead and pass all the elements from game1 container, that will kill tweens on any element contained in it.

 

TweenMax.killTweensOf('#container1 *');

 

or

 

TweenMax.killChildTweensOf('#container');

 

Though you will have to kill all delayed calls to functions as well otherwise anything being called later will start animating.

 

TweenMax.killDelayedCallsTo(myFunction);

 

[GreenSock]

A few ideas:

 

1) Just put each game in its own iframe. Done. Very easy and clean. 

 

2) Use the "data" property of the tweens to tag them with an identifier for which game they belong to. Then use the getAllTweens() and loop through the array and kill just the ones that match what you're looking for. Kinda like:

TweenMax.to(...{x:100, data:"game1"});
TweenMax.to(...{y:50, data:"game2"});

killTweensOfGame("game1");

function killTweensOfGame(name) {
    var tweens = TweenMax.getAllTweens(),
        i = tweens.length;
    while (--i > -1) {
        if (tweens[i].data === name) {
            tweens[i].kill();
        }
    }
}

 

Obviously that means adding "data" to every one of your animations which may be a tad cumbersome. 

 

3) Create a TimelineLite for each game, and populate it accordingly. 

var game1 = new TimelineLite({autoRemoveChildren:true, smoothChildTiming:true});
var game2 = new TimelineLite({autoRemoveChildren:true, smoothChildTiming:true});

game1.to(...);
game2.to(...);

//then to kill all the game1 tweens...
game1.kill(); //or game1.clear();

 

Does that help?