I am trying to build an event loop visualization as Jack Archibald did in this wonderful talk.
I've created three SVG (2 ellipses, 1 circle) for this visualization. My goal is to be able to change the path in the middle of the animation and it should continue to follow the next path at the first opportunity(probably when it reaches the center-top position of the center circle or the center-bottom position of the center circle.
My current implementation is adding an "onRepeat" callback to the currently playing animation and killing it when it starts to repeat.
Then I'm starting to the next animation.
But the problem with that is the square doesn't transition smoothly to the next path because my SVG's start positions are not the same. Even though I set their start position as close as possible to each other, I *should* be able to decide to follow another path in any phase of the currently running animation. So, I need some suggestions or clarifying that if this is possible with my way or should I try another approach. Any idea is appreciated.
I hope my explanation makes sense, if you could watch Jake's talk for a few seconds, you can understand better my goal
I also added a small video about how I use three different svg and merge them around center circle.