Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Unwanted delay in animating border radius

Go to solution Solved by mvaneijgen,

Recommended Posts


I'm new to GSAP and I've encountered a problem that I can't simply wrap my head around.


The animation is supposed to be a simple one, I want the border radius to change as I scroll but even after the start trigger it takes some time to animate.

To check whether something was wrong with my approach I added the background change but that seems to work as expected.


I would appreciate your insight on the matter.


See the Pen ExQZWPR by mindjacker90 (@mindjacker90) on CodePen

Link to comment
Share on other sites

  • Solution

Your `border-radius` is way larger then your circle. If you open the devtools and inspect the circle you'll see that GSAP is animating it perfectly. The `15em` gets converted to `240px`,  but the movement will only be visible at the half of that `120px`, so if you set the border radius to half of the box width it will be a perfect circle. I've also add a `ease: "none"` so that the animation on scroll is linear for the whole scroll duration (default animations is `power2.out`)

See the Pen yLvgMQj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen


What 15em really looks like in a 15em height and width box and you can see GSAP animates it instantly.

See the Pen wvygJYd?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
Link to comment
Share on other sites

Thank you very much, makes me feel a little stupid though.


Link to comment
Share on other sites

Don't worry about it! That's programming, just get another pair of eyes on it and a solution will come. I once wasted 2 days debugging and in the end it was a space somewhere in the code that should not have been there. 


And about the first line I thought that was just for debugging, but GSAP inherits the style from your CSS, so if you animate from `15em` it will do nothing for the whole duration, because it already is at 15. Each line in GSAP is it's own animation and they will animate right after each other, but there are also ways to animate two animations at the same time, the possibilities are endless! Good luck and don't hesitate to ask questions.


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



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