Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Matt Severin

SVG height and width tweening, based on child element's center

Recommended Posts

Is there a way to tween an SVG child's height and/or width from its center? Where I don't have to adjust its x or y position on update?

Link to post
Share on other sites

Sure, just animate scaleY and use transformOrigin: "50% 50%" - would that work for you? 

  • Like 1
Link to post
Share on other sites

I don't want to use scale because the shape has rounded corners. I want the corners to stay rounded without 'squishing' that would happen in a scale tween. Also, it has to stay in an SVG, I can't use a DOM rounded rectangle.

Link to post
Share on other sites

Afraid thats not possible. You'd have to also offset/adjust the x or y position at the same time.

  • Like 2
Link to post
Share on other sites

That's what I thought.

Any advice on getting an SVG's <rect> y attribute in an onUpdate function while tweening its attr:{height}? I've seen examples how to target a DOM element attribute but not SVG child's.

Link to post
Share on other sites

If you're tweening the height attribute it will be from the top so the y attribute won't change.

 

Unless I'm misunderstanding the question.

Link to post
Share on other sites

I want to update the y position so that there's the illusion of the svg <rect>'s height is increasing from the center, not the top. So I'd like to perform an onUpdate that repositions 'y' based on the <rect>'s current height. But I don't know how to target the <rect>'s y attribute.

for example: 

gsap.from('#rect1', {duration:.5, attr:{height:20}, onUpdate:function(){"this updates '#rect1' y position"}});

In this example I want the onUpdate to always target the object I'm tweening, no matter what it's labeled. I'm finidng it difficult to target the y pos in a nested SVG element.

Link to post
Share on other sites

Not 100% sure I'm following, but you can get the height attribute and tween the y transform accordingly. Maybe something like this.

See the Pen 815b824266a1a44e8cca5f85ba55346c by PointC (@PointC) on CodePen

 

Does that help at all or am I just missing the bigger picture here? :)

 

  • Like 3
Link to post
Share on other sites

Hey Craig I appreciate you taking the time. And you're in the ballpark, just not at the mound.

So I specifically need to update the Y position in an 'onUpdate:' function because there is a series of tweens that I am performing, in order, on the same target. Basically it's a very customized elastic animation that I'm deriving from an After Effects file. CustomEase won't cut it here. So I need to update y... onUpdate.

2nd, I need to do this to multiple <rect>s so, I need the onUpdate function to work on any <rect> in the SVG, so I need that function to be modular to the targeted <rect>.

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

×