Jump to content
Search Community

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

wcomp test
Moderator Tag

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

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?

See the Pen qgVPYy?editors=1010 by Wcomp (@Wcomp) on CodePen

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