Jump to content
Search Community

How to stop an animation before the new one starts with click

CodeGuy test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

Project Background:

I am working on a SVG Map and using the paths to animate the path going from one point to another, ie a to b, b to c, c to a etc. The Paths are drawn successfully but I am unable to find a solution to stop the current animation and clear out any related properties, before the next path starts to draw.

 

Code Pen Demo:

I have two SVG paths that get drawn. Both paths have their buttons for animation to start, currently when I click on Path 1 button it starts to draw and then when I click on Path 2 and starts to draw as well and both running as the same time.

 

When Path 1 is clicked and the path is being drawn and I click on Path 2 button I would like the Path 1  animation to stop and the Path 2 starts. When I say completely  stop, I mean completely I mean its set back to originally start before the button was clicked. 

 

I put a Kill() button when stops the animation but leaves the path line drawn on the screen, and if I start the second path the first one restarts I might not be placing it correctly maybe?

 

When searching the forum, I have came across clear(), restart() but that did not work or I might not applied them correctly, to keep the code demo minimum I did not include those into demo.

 

Any help or suggestions are very much appreciated.

 

Thanks!

 

See the Pen MNWzLj by comput3rguy (@comput3rguy) on CodePen

Link to comment
Share on other sites

Hi @CodeGuy

 

Welcome to the forum.

 

Right now you're adding tweens to the timeline on each click. I'd recommend creating the timeline(s) once and then controlling them as you wish. That being said, you can add this line at the beginning of your draw function.

 

tlm.progress(0).clear();

 

When you kill() a timeline it's gone forever and released for garbage collection. The element will still be there so you may want to rewind the timeline before you kill() it. The code I posted above just sets the timeline back to 0 and clears out the tweens. You then add the fresh fromTo() tween and you're good to go.

 

See the Pen mNdoJX by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Thanks @PointC for the code, it does what I was after, like what I see.

 

Could you please provide an example of what do you mean by"creating the timeline(s) once"?

 

The way I understand is ..to create a tween for each path instead in function and the on click buttons play the individual tween to the path?

 

I have multiple paths that are going use some properties, stroke-with, colour etc, so I thought creating a tween inside a function and them pass the path name would be better?

Link to comment
Share on other sites

1 hour ago, CodeGuy said:

The way I understand is ..to create a tween for each path instead in function and the on click buttons play the individual tween to the path?

 

Exactly. 

 

It certainly works the way you have it now, but each time you click the 'path 1' button you make the calculations and build the tween. If you created all the tweens/timelines in a loop you'd only have to make all those calculations once. You can put all the timelines in an array and trigger them with the button index or some other data attribute. Just my two cents. YMMV.

 

Happy tweening.

:)

 

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