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

[Matt Severin 31 Likes (Newbie)]

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?

[GreenSock 18,878 Likes (Superhero)]

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

[Matt Severin 31 Likes (Newbie)]

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.

[Cassie 5,653 Likes (Superhero)]

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

[Matt Severin 31 Likes (Newbie)]

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.

[PointC 14,466 Likes (Superhero)]

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.

[Matt Severin 31 Likes (Newbie)]

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.

[PointC 14,466 Likes (Superhero)]

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?

 

[Matt Severin 31 Likes (Newbie)]

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

[Cassie 5,653 Likes (Superhero)]

Seems like a good use case for registerEffect! ✨

 

docs here - https://greensock.com/docs/v3/GSAP/gsap.registerEffect()

See the Pen ab220568ec98f4a94ac2eaad6dc3eef6?editors=1010 by cassie-codes (@cassie-codes) on CodePen

 

[Matt Severin 31 Likes (Newbie)]

Thanks! @Cassie