Jump to content
GreenSock

icraft-websites

Dynamically change a tween's target

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

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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.
×