Dynamically change a tween's target

[icraft-websites]

Just wondering if you can swap in and out a tween objects target at any time to to use the same tween but on different objects at different times? 

 

e.g.

 

var obj1 = $('#obj1');

var obj2 = $('#obj2');

var tween = TweenMax.to(obj1, 1, {width: 100, paused:true});

tween.play();

 

then swap in obj2 into the same tween then play again?

[Rodrigo]

Hi,

 

Sure thing, something like this:

var t = TweenLite.to("#div1", 1, {left:300});

// then later in your code
t = TweenLite.to("#div2", 1, {left:300});

Like that you're replacing the element stored in the variable. If your scenario is a bit more complex, then you could create a function to swap the target elements in order to save code.

 

Rodrigo.

[icraft-websites]

Awesome, thanks! How would you then access '#div2' element when you call a onComplete:function(){..} on t?

[Carl]

You can use the onCompleteParams to pass a reference to the tween to the onComplete function.

 

//onCompleteParams:["{self}"] passes a reference to the tween in to the completeHandler function


TweenLite.to("#redBox", 1, {x:550, onComplete:completeHandler, onCompleteParams:["{self}"]})
TweenLite.to("#blueBox", 1, {x:550, onComplete:completeHandler, onCompleteParams:["{self}"], delay:1})

function completeHandler(tween){
  //tween is the tween that firec the onComplete
  //the target of the tween is easily accessed 
  console.log(tween.target)
  TweenLite.set(tween.target, {rotation:45})
}

Take a look here: http://codepen.io/GreenSock/pen/cwdIL/?editors=001