Dynamically change path on MotionPathPlugin

[Fatih Solhan]

Hi,

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.

 

See the Pen dymewKX by solhan (@solhan) on CodePen

[mvaneijgen]

Hi @Fatih Solhan welcome to the forum!
 

What I was thinking is have the shapes as you have them now, but have secondary paths that overlap these shapes. Then split the circle in to (through the middle)  and cut the ends/beginnings of the larger shapes. These are the places where you want them to transition. 
 

Paths are really particular about where they start/end, so keep that in mind when drawing them. but their is lot's about it on the MotionPathPlugin and through out these forums, I'll try to find some, but I'm on my phone at the moment.
 

See the Pen WNJjwdG by mvaneijgen (@mvaneijgen) on CodePen

 

Edit: these topics are great

 

https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/

 

 

[Fatih Solhan]

5 hours ago, mvaneijgen said:

Hi @Fatih Solhan welcome to the forum!
 

What I was thinking is have the shapes as you have them now, but have secondary paths that overlap these shapes. Then split the circle in to (through the middle)  and cut the ends/beginnings of the larger shapes. These are the places where you want them to transition. 
 

Paths are really particular about where they start/end, so keep that in mind when drawing them. but their is lot's about it on the MotionPathPlugin and through out these forums, I'll try to find some, but I'm on my phone at the moment.
 

 

 

 

Edit: these topics are great

 

https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/

 

 

Hey @mvaneijgen, thank you!

 

Since I'm not experienced much in drawing, I am using https://yqnn.github.io/svg-path-editor/ to draw my paths. I will focus more on the start/end points of paths to find the perfect transitions. But could you please explain your suggestion a bit more? I'm sorry I couldn't quite get that idea.

Also, thank you for your reply even though you were on your phone ❤️

[mvaneijgen]

Hey back at a PC again, here is what I would do.

 

These are the possible paths you want your shape to travel, so I would overlap these on the current shapes. The break points is where you want them to transition to the next path. Hope that clears it up. 

 

Ah cool tool, seems complicated though. If you are looking for a simpler tool check out https://boxy-svg.com

 

[Fatih Solhan]

On 9/19/2022 at 11:21 AM, mvaneijgen said:

Hey back at a PC again, here is what I would do.

 

These are the possible paths you want your shape to travel, so I would overlap these on the current shapes. The break points is where you want them to transition to the next path. Hope that clears it up. 

 

Ah cool tool, seems complicated though. If you are looking for a simpler tool check out https://boxy-svg.com

 

Sorry, it's been a busy week couldn't get back here.

Splitting circles in two helped a lot actually, thank you for that. I drew the paths by considering the starting and ending points and it looks like I am close to completing the animation. I will post the updates and hopefully the finished version when I'm done.