Juc1 Posted December 3, 2019 Share Posted December 3, 2019 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 More sharing options...
ZachSaucier Posted December 3, 2019 Share Posted December 3, 2019 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. 1 Link to comment Share on other sites More sharing options...
Juc1 Posted December 3, 2019 Author Share Posted December 3, 2019 @ Zach awesome thanks ? Could you please look at my codepen #2 in my first post (similar but different) ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 3, 2019 Share Posted December 3, 2019 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. Link to comment Share on other sites More sharing options...
Juc1 Posted December 3, 2019 Author Share Posted December 3, 2019 @ 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 More sharing options...
ZachSaucier Posted December 3, 2019 Share Posted December 3, 2019 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 1 Link to comment Share on other sites More sharing options...
Juc1 Posted December 3, 2019 Author Share Posted December 3, 2019 @ Zach thanks a lot ? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now