Jump to content
Search Community

Click events

Juc1 test
Moderator Tag

Recommended Posts

Hi all,

 

 Any ideas please what I am missing ? ?

 

codepen # 1

 

I want each click to alternate between - click 1 play the timeline, click 2 reverse the timeline, click 3 play the timeline etc. It is close except that the first click does nothing.

 

 

=======================================================================

 

codepen #2 

 

I want each click to play and reverse the timeline = click 1 play and reverse timeline, click 2 play and reverse timeline etc . It works fine on the first click but further clicks do nothing. 

 

See the Pen LYEPxKv by Juc1 (@Juc1) on CodePen

 

 

Thanks...

 

 

 

 

 

 

See the Pen eYYaLwd by Juc1 (@Juc1) on CodePen

Link to comment
Share on other sites

Hey Juc1,

 

Let's think through what this line of code is doing: tl1.reversed() ? tl1.play() : tl1.reverse();

// checks to see if tl1 is reversed
tl1.reversed() ? 
  // if it is, play the timeline
  tl1.play() 
  // if it isn't, reverse the timeline
  : tl1.reverse();

At the beginning, the timeline is paused and going forward. So what will the above code do?

 

It will try to .reverse() it. But since the timeline's progress is at 0, there is nothing to reverse through.

 

You have a few different ways of handling this. One is to detect if it's the first click and call tl1.play(); in that case. 

Another option is to set reversed: true on tl1 when you created it. That way when it checks if it reversed, it will work! That's what I did in the demo below:

 

See the Pen VwYYPxd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening.

  • Thanks 1
Link to comment
Share on other sites

@ Zach for the second one = 

See the Pen LYEPxKv by Juc1 (@Juc1) on CodePen

 I want each click to play and reverse the timeline = click 1 play and reverse timeline, click 2 play and reverse timeline etc . It works fine on the first click but how do I say run the timeline again (play and reverse) for each click ?

Link to comment
Share on other sites

Oh, I understand now. You want it to play the whole timeline (including the yoyo) each click. You can do that by telling it to restart.

 

See the Pen ExaamYJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you want to make sure the timeline completes before it can be restarted, check if it's active:

 

See the Pen jOEEmOz?editors=0010 by GreenSock (@GreenSock) on CodePen

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