Jump to content
Search Community

Calling fucntion with timeline with arguments

savvi

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

Posted

Hi..

 

Can someone tell me if its possible to pass a var to a function you call from a timeline?

 

I've been using timelines to call functions.. i.e.

 

this.tl.add(myFunction, 2)

 

but I want to pass a var so I thought the following:

 

this.tl.add.(myFunction("myvar"), 2)

 

But this doenst work.. any suggestions?

 

Thanks

  • Like 1
Posted

Hello cocomitte, and Welcome to the GreenSock Forums!

 

When adding functions to the timeline, take a look at the call() method:

 

http://api.greensock.com/js/com/greensock/TimelineLite.html#call()

 

You can also pass parameters:

myTimeline.call(myFunction, ["param1", "param2"]);

Other examples of taken from the call() Docs:

//appends to the end of the timeline
tl.call(func, ["param1"]); 

//appends it at exactly 2 seconds into the timeline (absolute position)
tl.call(func, ["param1"], this, 2);
  
//appends it 2 seconds after the end (with a gap of 2 seconds)
tl.call(func, ["param1"], this, "+=2"); 
 
//places it at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tween is inserted there)
tl.call(func, ["param1"], this, "myLabel"); 

//places it 2 seconds after "myLabel" 
tl.call(func, ["param1"], this, "myLabel+=2");  

Does that help?

  • Like 1
Posted

ok almost brilliant..

 

So my function is a within an object and if I make a call to this function outside of the timeline it works fine i.e.:

this.tl = new TimelineMax({onUpdate:updateUI});
this.tl.add(showAnim1, 1.5)

function showAnim1(){
        parent.anim1.animateWidth(0,300);
}

but when I try and tidy it up and call it directly within the timeline as shown below:

.call(parent.anim1.animateWidth, [0,300], this, 1.5)

I get a "Uncaught Cannot tween a null target."

 

Any idea why this would be?

jamiejefferson
Posted

Javascript doesn't maintain scope when you pass a function like this (as a property of an object), so you've got to set the scope as well:

.call(parent.anim1.animateWidth, [0,300], parent.anim1, 1.5);
// essentially: call animateWidth(0,300) on parent.anim1
  • Like 5
Posted

Well there you go..

 

Thanks Mr Jefferson I'll give that a bash!!

Posted

Yes that worked a treat!!

 

Thanks again.

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.
×
×
  • Create New...