Jump to content
Search Community

animating a circular shape while scrolling w/ScrollTrigger

Amini test
Moderator Tag

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

circular_scroll.gif

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

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