Jump to content
Search Community

SVG transform 'anchor point' position

celli test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I read through the SVG Gotchas! but I wasn't sure if this was covered. If not I can also add that there--but I can't seem to find a good solution yet! 

 

When I try to reposition an 'anchor point' of an SVG element, it also seems to reposition that element instead of just moving it's anchor point. So if I wanted to rotate an SVG group from the bottom-left corner and I set {xPercent:-100, yPercent:-100} it actually moves the group, so that part is not not positioned correctly. See the codePen to see what I mean. I am just moving the 'anchor points' for the arms and legs--but when I do that it also repositions them. There must be a solution rather than moving the x and y positions back ?

See the Pen 06716224865c2c536cee5b4222d771ee by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hello Celi

 

SVG uses a different transform-origin due to how SVG and browsers react different. So GSAP provides the following to help bridge the gap for transform origin in SVG in the various browsers.

 

You can always check out the CSSPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • svgOrigin

    [Only for SVG elements] Works exactly like transformOrigin but it uses the SVG's global coordinate space instead of the element's local coordinate space. This can be very useful if, for example, you want to make a bunch of SVG elements rotate around a common point. You can either define an svgOrigin or a transformOrigin, not both (for obvious reasons). So you can do TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"}) if you'd like to rotate svgElement as though its origin is at x:250, y:100 in the SVG canvas's global coordinates. Units are not required. It also records the value in a data-svg-origin attribute so that it can be parsed back in. svgOrigin doesn't accommodate percentage-based values. See an example here.

  • smoothOrigin (for SVG only)

    When changing the transformOrigin (or svgOrigin) of an SVG element, CSSPlugin will now automatically record/apply some offsets to ensure that the element doesn't "jump". You can disable this by setting CSSPlugin.defaultSmoothOrigin = false, or you can control it on a per-tween basis using smoothOrigin:true | false. Explanation: The way transforms and transform-origins work in the browser (and according to the official spec), changing the origin causes the element jump in a jarring way. For example, if you rotate 180 degrees when the transform-origin is in the element's top left corner, it ends up at a very different position than if you applied the same rotation around its bottom right corner. Since GSAP is focused on solving real-world problems for animators (most of whom prefer to smoothly alter the transformOrigin), the new smoothOrigin feature in GSAP solves this issue. This also means that if you create SVG artwork in an authoring program like Adobe Flash where it may not be easy/obvious to control where the element's origin is, things will "just work" when you define a transformOrigin via GSAP. Currently, this feature only applies to SVG elements, as that is where it is more commonly a pain-point, and we're eager to see how GSAP users employ the feature and share their feedback/suggestions before we consider adding it to "regular" DOM elements.

 

Hope this helps! :)

  • Like 7
Link to comment
Share on other sites

Can you clarify what was wrong with your initial codepen though, apart from the different values? As fas as I know, svgOrigin does the same thing as transformOrigin, except it takes the whole SVG as a reference instead of the individual element. So, using transformOrigin, you could use the group's positioning.

Link to comment
Share on other sites

I think you are right Accent. I was having trouble finding the correct positions to set the anchor point that way--maybe that was the issue. I forgot about svgOrigin, and it is actually helpful that it uses the 0,0 position of the parent SVG... but I do think either way will work, you are right!

  • Like 2
Link to comment
Share on other sites

Thanks Blake. I didn't get into the spine/skeletal animations yet. This is just using the transform Origins and bouncing the elements a little, but it worked well for this! When I am trying to use fluid movement on someone, I will try the spine!

  • Like 1
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...