jorma Posted November 14, 2019 Posted November 14, 2019 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 Posted November 14, 2019 Posted November 14, 2019 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 Posted November 14, 2019 Author Posted November 14, 2019 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 Posted November 14, 2019 Posted November 14, 2019 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. 4
ZachSaucier Posted November 14, 2019 Posted November 14, 2019 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. 2
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now