Gsap Flip borderRadius distorted when scale:true;

[zygmax]

I've found similar codepen to my issue. Basically clicking on tabs changes pill's position. But when I added scale:true to Flip.from options it distorted borderRadius. I believe I should set borderRadius manually inside update function? But not sure how to do this. Please help

See the Pen jOXaVBN by pawel-zygmunt (@pawel-zygmunt) on CodePen

[mvaneijgen]

Hi @zygmax welcome to the forum!

 

I think in this case you don't want scale, so scale: false fixes the issue right? 

 

See the Pen BavmWmY by mvaneijgen (@mvaneijgen) on CodePen

[zygmax]

@mvaneijgen Scale:false fixes issue, but instead animates width - its unwanted. Framer motion animates scale to make animation as smooth as possible, but it updates borderRadius on the fly. Hope it is also doable in gsap?

[mvaneijgen]

Animating width is less performant I know, but if it is your only option it's the way to go. Just keep it in mind and don't over use it. 

[zygmax]

@mvaneijgenI believe its kinda reliable solution, but Im not sure how to calculate this borderRadius now. Looks like its the only missing piece is to properly calculate this.  

See the Pen jOXaVBN?editors=1111 by pawel-zygmunt (@pawel-zygmunt) on CodePen

 I would like this to be always fully rounded.

[IndM]

@zygmax I'm not sure what you're after but if you want it always the be fully rounded, just adjust your css border-radius to 100%. This way it will always be rounded. Note that when you want perfect round circle, it needs an aspect ratio of 1/1.

@mvaneijgen solution looks the correct one for me

[zygmax]

@IndMI just want to make @mvaneijgen solution but with scale:true. In order to keep borderRadius look the same on every pill's width.

[GreenSock]

Scaling just stretches things. And border-radius is a tricky thing to set directly like that when there are different values for the different axis since it's a complex property (8-in-1). In this case, it's better to set it directly in the onUpdate rather than going through GSAP: 

See the Pen xxmPWqa?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Honestly, I doubt you'd notice any real-world performance difference if you just animate width instead of trying to calculate and update the border-radius on every single tick. It's simpler to just turn off the scale: true option.