Jump to content


animating a circular shape while scrolling w/ScrollTrigger

Recommended Posts

Hi, we wanted to create this animation but we exactly have no idea how to do it. I do have some ideas like using clip-path but that is not achievable. Any ideas and roadmaps on how to do it?

Much appreciated


Link to comment
Share on other sites

CSS conical gradients are your friend here. You can use GSAP to animate the gradient values to get this effect.

Link to comment
Share on other sites

I couldn't help myself - I whipped together a helper function that'll draw a pie chart piece with a bunch of animatable properties like startAngle, endAngle, radius, cx, cy: 

See the Pen eYMRGJo?editors=0010 by GreenSock (@GreenSock) on CodePen


You should be able to wire that up to ScrollTrigger quite easily. If you get stuck, just post a minimal demo.


I hope that helps. 

Link to comment
Share on other sites

@SteveS @GreenSock Thanks a lot. These were the first steps on how to do it and now I have a better understanding!


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