wcomp

Can you pass a timeline to a function as an argument?

Recommended Posts

Can you pass a timeline to a function as an argument? Here is the pen. The animation refuses to play. lol.

 

The code looks like this:

var tl1 = new TimelineLite({paused:true});
tl1.to("#playhead", 1, {left:"100%", ease:Linear.easeInOut})


function over(timeline) { timeline.reversed() ? timeline.play() : timeline.reverse(); }


function Binding(){   $("#next").on('click', over(tl1) );   }
  
Binding();

 

Is there a way to do this?

Share this post


Link to post
Share on other sites

@wcomp,

 

I've forked your pen and made notes. Should explain everything :)

 

 

 

Hope this helps!

  • Like 3

Share this post


Link to post
Share on other sites
47 minutes ago, Shaun Gorneau said:

@wcomp,

 

I've forked your pen and made notes. Should explain everything :)

 

 

 

Hope this helps!

Thanks! You're the man! :-)

Share this post


Link to post
Share on other sites

Although Shaun already illustrated it perfectly, I just want to add that timelines and tweens can be passed into functions and also returned from functions. At their core a GSAP animation is just a javascript object.

 

Check out this article for more fancy (and practical) ways to make use of this: https://css-tricks.com/writing-smarter-animation-code/

  • Like 3
  • Thanks 1

Share this post


Link to post
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.