Jump to content
Search Community

svgOrigin being ignored?

Thisjustin test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

  • Solution

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?

  • Like 2
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...