Share Posted November 28, 2022 Hello, I've run into an odd situation where an animation I've done successfully before is no longer working. It's as if the svgOrigin parameter is being ignored. The example in this post is incorrect, I will post the correct version as well. But I cant' figure out why the two are behaving differently. Incorrect version (second pen): The circles should be expanding from the point indicated by the red dot. See the Pen zYaaEjg by Thisjustin3141 (@Thisjustin3141) on CodePen See the Pen WNyKRyW by Thisjustin3141 (@Thisjustin3141) on CodePen Link to comment Share on other sites More sharing options...
Solution Solution Share Posted November 28, 2022 Hi @Thisjustin svgOrigin only affects transforms, but you're animating attributes (like cx, cy, and r) which have nothing to do with transforms. If you take your original demo that "works" and completely delete all svgOrigin references, you'll notice it makes absolutely no difference, right? You could adjust your animation accordingly, or you could switch to using transforms, like "scale" in this case and set the vector-effect to non-scaling-stroke so that the stroke width remains consistent: See the Pen YzvjxJM?editors=1010 by GreenSock (@GreenSock) on CodePen Does that help? 2 Link to comment Share on other sites More sharing options...
Author Share Posted November 28, 2022 Thank you for the response. I obviously didn't read the docs correctly! I'm still not 100% sure why one works and one doesn't as I think they're identical, but your solution is definitely more elegant and removes that ambiguity. Link to comment Share on other sites More sharing options...
Share Posted November 29, 2022 1 hour ago, Thisjustin said: I'm still not 100% sure why one works and one doesn't as I think they're identical, but your solution is definitely more elegant and removes that ambiguity. Neither of them "works" in terms of svgOrigin. The second one is animating that way because you just didn't calculate the cx and cy properly so that they are offset linearly along with the radius (they're traveling further than radius). But yeah, I think it's simpler to approach it the other way. Enjoy! Link to comment Share on other sites More sharing options...
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