Jump to content
Search Community

SVG not centering as expected

hoverfly test
Moderator Tag

Recommended Posts

I'm trying to get proper control of these balloons, and I'm close, but not. quite. there yet.

 

The green one is for reference, and demonstrates that gsap's default behavior is to use "left top" as the origin.

 

The red one is the one whose attributes I'm tweaking, trying to accomplish this one, surprisingly-challenging goal: start horizontally centered, then animate till it's scaled 2x and centered on the crosshairs.

 

Questions I have about the attached pen:

  1. Why doesn't the red balloon start already-centered?
  2. Why does the red balloon end up slightly below-left of the crosshairs? (I put a subtle box around the red balloon to make this easier to see.)
  3. What can I do to resolve these 2 issues before moving on to learning to animate these suckers along a curve??

 

?

See the Pen bGGMwGO by clozach (@clozach) on CodePen

  • Like 1
Link to comment
Share on other sites

27 minutes ago, hoverfly said:

Why doesn't the red balloon start already-centered?

 

transformOrigin/svgOrigin affect scale, rotation, and skew. And svgOrigin uses the <svg> element's coordinate system. So svgOrigin: 50% 50% means everything is going to transform around 100,150 in the svg. transformOrigin: 50% 50% would be the center of the balloon. To center your element, use xPercent: -50 and yPercent: -50.

 

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

 

 

  • Like 4
Link to comment
Share on other sites

3 hours ago, hoverfly said:

feel free to check out my original question.

 

After reading your question over there, it sounds like you were expecting transformOrigin to behave like in Adobe products, where changing the registration point causes the element to move. It doesn't, but that's what xPercent/yPercent are for. ? 

 

Just use those with a transformOrigin: 50% 50%, and everything should be pretty easy with curves.

 

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

 

 

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