Amini Posted July 22, 2022 Share Posted July 22, 2022 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 More sharing options...
SteveS Posted July 22, 2022 Share Posted July 22, 2022 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 More sharing options...
GreenSock Posted July 22, 2022 Share Posted July 22, 2022 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 More sharing options...
Amini Posted July 22, 2022 Author Share Posted July 22, 2022 @SteveS @GreenSock Thanks a lot. These were the first steps on how to do it and now I have a better understanding! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now