Robin-Hoodie

Went through the answer you linked, which did clarify a lot, especially why leaving out align did not work It also made me realize I can use 2 techniques to fix this, without having to define offsetY Without changing the tweened SVG position: align: #motion-path and alignOrigin: [0.5, 0.5] to achieve the same effect With changing the tweened SVG position: Setting the circle's cx and cy values to the same value as the M command of the motion path, will allow align: self to work Thanks for the quick support!

Awesome, that works! Why is that necessary though?

I exported a small part of my SVG from Illustrator, and used a circle to animate along a motion path. The start and end of the animation work fine, though when an arc is introduced, the circle does not follow the center of the path anymore, but rather seems to have its top aligned with the path instead. I've tried adding alignOrigin: [0.5, 0.5] though that doesn't help. A bonus question is why I have to add align: self. If I don't do that, the motion path's coordinates seem to be interpreted as coordinates relative to the circle, instead of absolute coordinates. (as it seems to jump mostly to the right and slightly downwards, presumably the same as the first `M` command of the motion path)

In my case I wanted to test that some animations on DOM elements had been completed correctly by GSAP. I had a vue component that did some animations on some DOM elements in its template on being mounted. Thus I exported all timelines and instantly completed them. Works like a charm for me: const tl = gsap.exportRoot(); tl.totalProgress(1); // Now I can verify whether DOM animations have been done