I'm using Canvas to do this link , but I'd like to stop the animation by clicking on div using some requestAnimationFrame functionality. I used setInterval but the animation does not look cool, so I decided to use requestAnimationFrame but I can not stop the animation after a click and continue after another click.
The code works simply with a circle above a line using the clip() method, and when you click the div , the circle moves on the x-axis by going over the line showing it, only I want to stop the animation after a click and then continue (like a play and stop button, giving the intention that the line has stopped growing).
Would it also be possible for me to define a path for the circumference to follow after the click? Example: link
* In my example it follows a path, but it is straight, I wanted the circumference moves by a path already pre-defined as in the above example.