Share Posted February 10, 2021 I have a simple svg with a rect box inside. I want to change the width of this rect in such a way that it changes from the centre of the rect, like a scaleX would work with transform-origin center. Currently, reducing the width contracts it from the right side. I need to change with width in order to maintain fidelity otherwise I'd use scale. Is there a way to get this to work? Would I have to play around with the x attribute? Thanks. See the Pen yLVaXpy?editors=1000 by ritwikvd (@ritwikvd) on CodePen Link to comment Share on other sites More sharing options...
Share Posted February 10, 2021 Is this what you are looking for? See the Pen NWbRyGv by mvaneijgen (@mvaneijgen) on CodePen I've removed with `width` and `height` from the SVG, add the `viewbox` and add `preserveAspectRatio="none"` to it. In the Rect i've set the stroke to `vector-effect="non-scaling-stroke"` so it keeps it original width. Then with GSAP I change the `width` of it. 2 Link to comment Share on other sites More sharing options...
Author Share Posted February 10, 2021 @mvaneijgen thanks very much for your reply. I would like the svg to remain stationary, and just the rect inside to contract and expand around its centre. Link to comment Share on other sites More sharing options...
Solution Solution Share Posted February 10, 2021 I see you've updated your pen, it is much clearer now what you want to do, would be nice if you add the GSAP code you would think you would need, then we can see your thought process. This is the closes I can get See the Pen RwoGJmg by mvaneijgen (@mvaneijgen) on CodePen Maybe you could explain what you are trying to do? Now we know only the end goal but if we know the context maybe there is an easier solution. 4 Link to comment Share on other sites More sharing options...
Share Posted February 10, 2021 Hey @volls, Welcome to the GreenSock Forum. You could use the GSAP AttrPlugin See the Pen qBqaKPB by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
Share Posted February 10, 2021 Going forward, could you please use the "fork" button when making new versions of your demo to post in these forums, @volls? That way context is not lost for other readers. Link to comment Share on other sites More sharing options...
Author Share Posted February 10, 2021 @mvaneijgen thanks! I essentially wanted to find out if there was a way to do this without having to manipulate the x attr. But I've been researching stuff thru out the day, and haven't found anything, so I think I'll just go with your solution for now. Thanks very much for your time. @mikel Cheers! will look into that @ZachSaucier will do! Link to comment Share on other sites More sharing options...
Share Posted February 10, 2021 There seem to be quite some different ways to do this. Seems that with the help of flexbox-centering you could also achieve it by simply tweening on the width. See the Pen 4d8c835a3b16fb41a346981fd5a21bd1 by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now