Jump to content
Search Community

Gsap Flip borderRadius distorted when scale:true;

zygmax test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

@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

  • Like 2
Link to comment
Share on other sites

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. 

  • Like 2
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...