Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Recommended Posts

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');
Link to comment
Share on other sites

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
  • Like 3
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.