Rocha Posted June 16, 2020 Share Posted June 16, 2020 Hi all, I am trying to animate SVG elements for the two states (play/pause) when you click on each button. So far the animation works from play to pause but the reverse animation doesn't happen, it just jumps straight to the play icon. Although, after pressing play I set a timeout function that reverses the animation from pause to play after 5 seconds. Surprisingly, the animation works here even though the parameters are identical to the ones that don't work on click. Does anyone have any idea why is this not working? Thank you See the Pen vYLXZvK by rochudo (@rochudo) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted June 16, 2020 Share Posted June 16, 2020 The problem is that you're re-creating the timeline every time you click and the playhead starts at 0 (the start), so if you reverse() a timeline whose playhead is ALREADY at 0, there's nowhere for it to go - it's already at the start. See what I mean? If you want it to play from the end, you can force the playhead to the end before calling reverse like audioPlayPause.progress(1).reverse(). But frankly, I would recommend tweaking your code to improve performance because you really don't need to be recreating the timeline on every click. Just reuse the same instance. And there's no need to use setTimeout() because it's not synced with requestAnimationFrame - just use gsap.delayedCall() instead. Here's how I'd simplify things while improving performance: See the Pen 71423c43e6edb7826ed2ea9115a721f3?editors=0010 by GreenSock (@GreenSock) on CodePen Does that help? 1 Link to comment Share on other sites More sharing options...
Rocha Posted June 17, 2020 Author Share Posted June 17, 2020 That looks so much better now @GreenSock Thank you so much!! It makes sense not recreating the timeline on every click because then you run into the issues you've mentioned. I couldn't see it before but I get it now. I had to add another bit of functionality to my codepen which is a pause all button. Unfortunately, it doesn't react as expected. Using either setor to in the pause all button function "does work" but once you click on any of the play buttons the animation reverses back again. I get it, it's the same issue I was having before, the timeline is at 100% so it will always do that. I feel stuck because the timeline audioPlayPause can't be accessed from outside $(".btn_play_pause").each(function(i, button) {} which makes it impossible to simply do audioPlayPause.reverse(); What would it be the best approach to tackle this? Link to comment Share on other sites More sharing options...
GreenSock Posted June 17, 2020 Share Posted June 17, 2020 I like creating objects that have simple methods I can call (object-oriented), and you can store them all in an Array, like allButtons which you could then loop through whenever you want and call pause() on each one for example: See the Pen 39ee309f458fe8f35d16c8024e0c52ba?editors=0010 by GreenSock (@GreenSock) on CodePen Does that help? 3 1 Link to comment Share on other sites More sharing options...
Rocha Posted June 17, 2020 Author Share Posted June 17, 2020 It really does help, you've cracked it!! thank you very much @GreenSock I was miles away from achieving your solution but I sort of knew that all actions had to be stored within the same loop. I just didn't know how to even approach it I now get what you've done there so hopefully I can apply that to future projects 1 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