Jump to content


Dynamically change target of timeline

Moderator Tag
Go to solution Solved by GreenSock,

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

I am trying to create a timeline where the target can be updated dynamically. When .play() is called, I want what is tweened to be based of the current $(this) jQuery object. The way I was attempting to do this does not seem to work. 


The codepen is a simplified version of my attempts:


Is there a way to use a argument or parameter for this? 

See the Pen ENEbLz by sithsev (@sithsev) on CodePen

Link to comment
Share on other sites

Hi :)


pls try like this : 


function tlGenerator(target){
  var tl = new TimelineLite()
  tl.to( myTarget, 1, {x:300});
  return tl; // you can store generated timeline to be controllable like this : var myNewTl = tlGenerator(myTarget);

var myTarget = $(".red"); 

var redTl = tlGenerator(myTarget);

  myTarget = $(".blue");

See the Pen GNxyWy by MAW (@MAW) on CodePen

  • Like 2
Link to comment
Share on other sites

  • Solution

When any tween renders for the first time, it has to read the current values and record the starting/ending values internally so that it can perform interpolation extremely quickly during the rest of the animation. We place a huge priority on performance since animation is the most performance-sensitive aspect of UX. So it's not as simple as just swapping out the target of a tween or timeline (actually, timelines don't have targets - their child animations can have all different targets). For example, if the original tween was going to animate elementA to x:100, perhaps it started with an x of 0 but then if you swap in elementB as the new target (also animating to x:100), it might actually start at an x of -500 (or whatever). It's a completely different tween altogether, requiring different interpolation, etc. Or the target might actually be an array of elements and the new array might share some of the same elements as the previous array. 


The point of all that is to help you understand some of the mechanics so that the answer makes more sense...


Diaco is correct - it's best to just create new tweens/timelines when you're animating new things. It should be very easy to write modularized code (as he showed) that leverages functions to do the heavy lifting. You could even share common vars objects where you store all the destination values or whatever, and just pass that into each new tween. Lots of options. But it's generally not the best idea to try to re-purpose an old tween/timeline for a new target.


Does that help?


PS Diaco, I think your code might be missing a "redTl = " inside that click() function, right? Otherwise you're always calling reverse() on the original timeline. Or perhaps I misunderstood what you were doing(?)

  • Like 2
Link to comment
Share on other sites

nope , it's just an example for store returned tl/tween instead of just playing a timeline/tween on click , for control in future such as reverse , pause , play...etc

Link to comment
Share on other sites

Ok thanks to you both. The solution wasn't exactly what I needed but it got me down the right path to finding it. Thanks guys!

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.