Jump to content
Search Community

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

Matt Severin test
Moderator Tag

Recommended Posts

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