Jump to content
GreenSock

mayyar

I try to make full circular slider

Recommended Posts

Hello , i am sorry to make full slider circular , i found a good example on this amazing forum ,  but i don't have too much experience to make it alone and i need to under stand it , so i need some one to help me 

all i want 

the same code pen 

but i want to rotate circle with drag mouse and the circle have a infint rotate 

then if i have a buttons like pre and next but for category , like if i press a fruit button the number change to fruit 

i know that is bad but i need some help thank you  

See the Pen abEyVOV by MayyarMag (@MayyarMag) on CodePen

Link to comment
Share on other sites

I think this page will be useful, particularly the demo that shows rotation and snap to angles:

 

Link to comment
Share on other sites

3 hours ago, elegantseagulls said:

I think this page will be useful, particularly the demo that shows rotation and snap to angles:

Thank's for replay 

some thing like 

See the Pen abEyVOV by MayyarMag (@MayyarMag) on CodePen

but i think i lost the main concept about click on one circle  

Link to comment
Share on other sites

Any help plz 😪

Link to comment
Share on other sites

Hi @mayyar. Your question isn't really a GSAP-specific one, it's more about logic. Unfortunately we just don't have the resources to offer free general consulting services (please read the forum guidelines) but you're welcome to post in the "Jobs & Freelance" forum to see if you can hire someone to help. Or you can contact us directly if you'd like to engage GreenSock on a paid basis for consulting services. 

 

The general idea, though, is you'd need to run logic when the wheel spins to figure out which dot should be highlighted based on the angle or progress. It's very doable, so don't worry about it being super difficult or impossible.

 

You probably don't need a motionPath tween either, although that is totally fine. For a circle, you can merely set the transformOrigin to "center center" and animate the rotation of the container and then counter-rotate the inner circles to keep them level (if that's the effect you want). 

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