Jump to content
GreenSock

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

Toggle buttons animation with DrawSVG Plugin

Recommended Posts

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

Share this post


Link to post
Share on other sites

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? 

 

 

  • Like 1

Share this post


Link to post
Share on other sites

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? 

See the Pen vYLXZvK by rochudo (@rochudo) on CodePen

Share this post


Link to post
Share on other sites

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? 

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


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

×