SVG not centering as expected

[hoverfly]

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.

[OSUblake]

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.

 

 

[hoverfly]

Thanks, @OSUblake! This helps a lot.

 

If you have a StackOverflow account and want some rep, feel free to check out my original question. I'll check back there in a few days and "answer my own question" if not.

[OSUblake]

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.

 

 

[hoverfly]

Very cool! Thanks again!