Jump to content

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

Lucky wheel

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


I would like to make a lucky wheel (something like this) and I am in trouble with the indicator at the topright corner.

I've 12 sectors on the wheel and the indicator sholuld move when the little sticks are under it.  The problem is the wheels easing and the triggering.

Can someone help me?

See the Pen bYEXGx?editors=0011 by szsoma (@szsoma) on CodePen

Link to comment
Share on other sites

See if it works for you, I am using modulus of current rotation to trigger that indicator animation. I am using tolerance of 2 so it will mostly trigger even if it is spinning too fast. Higher tolerance causes it to trigger at random places.  You need to update your logic to get deg variable because after first spin it spins to same value.


As for your wheel, it had '49% 50%' as transformOrigin which was making it spin randomly.


See the Pen dZMmPB?editors=1010 by Sahil89 (@Sahil89) on CodePen


  • Thanks 1
Link to comment
Share on other sites

This one is perfect, I have modified it further. Because you are using Power4 ease, I am setting tolerance upto 10 for progress under 0.4. After than tolerance is set to 0. So when wheel is spinning faster, it will still trigger the indicator. When it slows down, lower the tolerance so it will trigger only on edges. You will have to spend some good amount of time to fine tune it further.


EDIT: you can compare currentRotation with last rotation so you don't have to rely on easing effect while fine tuning. Higher the difference, higher should be tolerance.


See the Pen yPOKev?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 3
  • Thanks 1
Link to comment
Share on other sites


Thank you for the solution! You helped me a lot with this. I'm relatively new with JS and Greensock, but it is so cool. :)


  • Like 2
Link to comment
Share on other sites

  • 2 years later...

Hi Sahil,


I asked this question on a different post but I figured it might helps others who come to this post:


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.