Animate attributes with Bezier plugin

[jorma 16 Likes (Newbie)]

I'm trying to move some circles around with the Bezier Plugin. However, when I animate the cx and cy they are animated in the style. Not the actual attributes. How do I animate the attributes?

 

<circle id="mycircle" cx="250" cy="250" r="10" style="fill: rgb(0, 0, 238); stroke: rgb(238, 238, 238); stroke-width: 3px; cy: 422px; cx: 167px;"></circle>

See the Pen zYYJVEW by jormaturkenburg (@jormaturkenburg) on CodePen

[OSUblake 18,533 Likes (Superhero)]

I don't think that is possible, at least not directly. Why are you trying to animate attributes anyways? What's wrong with letting it do x and y transforms?

[jorma 16 Likes (Newbie)]

I'm not sure I understand what you mean with letting it do x and y transforms. At the moment it is animating cx and cy in the style. How do I let it do x and y transforms?

 

Thx

[OSUblake 18,533 Likes (Superhero)]

Just use x and y for the points. I had to subtract 250 from the values. 

 

See the Pen 0002aac278519160d0f65ae3d425939d by osublake (@osublake) on CodePen

 

Alternative. Don't use cx/cy, or swap them out.

 

See the Pen de630702076bf7bcfe7083f99e66fffb by osublake (@osublake) on CodePen

 

[jorma 16 Likes (Newbie)]

Perfect! Thank you.

[ZachSaucier 7,162 Likes (Superhero)]

Another alternative: GSAP 3's MotionPathPlugin makes movement along a path easy! You should check it out  I'd recommend still using x and y or a <path> when using it though.