Setting top/left for next '.to' in prior '.call' in TimelineLite

[ezgl33 0 Likes (Newbie)]

I would like to set the 'top/left' coordinates of an element in a TimelineLite using variables set in a prior call (see below).  When I use the code below (a simplified version of my code) I get the following error: 'ReferenceError: Can't find variable: finalleft'.  I have also tried using window.foo to set the variables which also did not work.  Any ideas on how to get this to work?

var problemtl = new TimelineLite();
  problemtl.to(step1, 1, {alpha:1})
    .to(step1, 1, {scale:.8, left:300, top:300}, '+=0.5')
    .call(function(){finalleft = 500; finaltop = 100})
    .to(step2, 1, {alpha:1}, '+=0.5')
    .to(step2, 1, {scale:.8, left:finalleft, top:finaltop}, '+=3');

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

The reason this doesn't work is due to order of operations and possibly the fact that you do not globally define your finalleft variable anywhere like

var finalleft;

The bigger issue though is that the call() that sets the variable values doesn't execute until after the timeline is created and the first 2 tweens have played.

 

However the code in the final tween that needs those variables to be set

.to(step2, 1, {scale:.8, left:finalleft, top:finaltop}, '+=3');

gets processed as soon as the timeline is created.

 

TimelineLite/Max are highly optimized so that minimal calculations and processes are run while animations are happening. As such, when you create a tween that gets placed in a timeline, the ending values for that tween are recorded immediately. When TimelineLite is trying to record the end values in that last tween finalleft and finaltop are not yet defined.

 

You can absolutely use variables as values in tweens in GSAP, but you should not create tweens until you know what those values are.

Also, it isn't very practical (or easy) to place a tween in a timeline and then update its values while the timeline is playing.

 

So based on these "rules", I would suggest that you wait to add the tween to the timeline until you know what those variables are. Here is a basic demo

 

var tl = new TimelineLite();
var bottom;


function setBottom(){
  bottom = 400;
}


function dynamicTween(){
  tl.add(TweenLite.to("#redBox", 1, {y:bottom}))
}


tl.to("#redBox", 1, {x:100})
  .call(setBottom) //figure out the value of bottom
  .call(dynamicTween) //call function that will add a tween with current value of bottom

 

http://codepen.io/GreenSock/pen/PPYjJQ?editors=001