Unexpected yoyo in a motionpath effect

[Pageking]

I have created a simple effect where I want to track a <circle> on a circular path in another SVG. Everything seems to be working as expected except for one thing. The animation tracks back (like the yoyo effect) even when I apply yoyo: false; 

Does anyone know what causes this? I made a minimal demo where this issue also arises

See the Pen XWOOqgJ by wouter_pageking (@wouter_pageking) on CodePen

[mvaneijgen]

I'm not sure what is wrong here. Can my maybe elaborate what you're seeing and maybe in what browser/OS? I see a pin circle moving on the outer most shape of the SVG in a counter clockwise fashion and it is repeating this motion infinitely. (Safari 17 & Chrome 119.0.6045.159 / macOS)

 

Ik heb het idee dat ik iets mis, maar zou niet weten wat 🙃

 

 

[Pageking]

Apologies, I edited the code so that it "technically" works, but I still am not sure what caused the original problem which is in view now.

[mvaneijgen]

I think I found what is going on here. I have the feeling you think your lines are a single path, but in actuality they are a path containing two outlines. See below your #OuterRing in an online SVG viewer. I've picked up one the points and dragged it away to better illustrate the issue. You probably have set your vector program to export converting everything to outline or something. 

 

The shape is riding along on the inner and the outer lines of the path. If you convert the paths to be single a line it will fix the issue, but you maybe have to redraw the shapes in your vector program. 

 

Hoop dat het helpt en happy tweeling!