Jump to content
Search Community

Lucky wheel

szsoma test
Moderator Tag

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

Hi!

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

  • 2 years later...

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