Scaling and border radius

[tganyan]

I'm in the middle of creating an effect that involves scaling down a parent container and adding rounded borders to it in the process. The issue I've come up on is that scaling it down, particularly if I need to reduce the width more than the height, is messing with the border radius and I'm not certain how to address this. I did read elsewhere that animating width and height, instead of scaling, fixes the issue, however when I use width and height it sometimes creates this stutter effect that I can't have and scale tends to eliminate that. I have this issue open on stackoverflow as well, but the GSAP forums are always so great and responsive I thought I'd check over here as well. 

 

Codepen is dumbed down for the sake of offering a simple example of the issue.

 

Thanks in advance for any advice on this!

 

See the Pen qBYqvLX by tganyan (@tganyan) on CodePen

[Rodrigo]

Hi @tganyan,

 

This particular issue was discussed in this thread:

Unfortunately there is no silver bullet for this situation and you'll have to either use width/height, or find the best possible approach for using scale with border radius.

 

Happy Tweening!!!

[tganyan]

Appreciate the response, and sadly you're confirming what I suspected might be the case. I do have one solution in place that basically sets the scale back to 1 and then a hard width and height on the element at the exact end of the animation; it's not perfect, and I don't think it scales all that well, but it gets pretty close to the goal for this project. Will have to chat about it with my designers tomorrow morning and see what's preferred. Thanks again!

[Cassie]

Good old 9-slice-scaling to the rescue. Just like the olden days before border radius was a thing!

 

https://pqina.nl/blog/animating-width-and-height-without-the-squish-effect/