Jump to content
GreenSock

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

Click events

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.

 

https://codepen.io/Juc1/pen/eYYaLwd

 

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

 

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

 

 

 

 

 

 

Share this post


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

Share this post


Link to post
Share on other sites

@ Zach awesome thanks 🙂

 

Could you please look at my codepen #2 in my first post (similar but different) 🙂

Share this post


Link to post
Share on other sites

Your second pen is just telling the timeline to continue playing on click. What are you wanting it to do? You don't have any logic in there for reverse or pausing or anything.

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

@ Zach thanks a lot 🙂

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×