Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hoverfly

SVG not centering as expected

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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. :)

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×