Circle not following center of path

[Robin-Hoodie]

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)

See the Pen ExNdyyw?editors=1111 by robin-oreon (@robin-oreon) on CodePen

[tailbreezy]

Hello,

 

alignOrigin works when you align to a path.

 

  motionPath: {
    path: "#line",
    align: "#line",
    alignOrigin: [0.5,0.5]
  }

 

Another way is to align:self and to offsetY, say by your circle radius value

 

  motionPath: {
    path: "#current-line-ironer",
    align: "self",
    offsetY:-14.3,
  }

 

As for your align question, check this thread. Jack explained this case.

 

 

 

[Robin-Hoodie]

Awesome, that works!

Why is that necessary though?

[tailbreezy]

I have added a reference from the forums to my answer. Check it out.

[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!

[tailbreezy]

@Robin-Hoodie I am not support actually, just a regular member who is procrastinating real-work.

I have added the part about alignOrigin right after my last comment, it seems you missed it.

Other than that it is always better to figure out things on your own, so thumbs up.