Luckywheel with animation spin

[andufo]

Hello! I'm new here, just started using GSAP. I'm trying to build a luckywheel for a promo, which gives the visitor up to 3 opportunities to spin the wheel. I already have covered the first spin, but I still have 2 specific questions:

 

1. The second/third time I spin the luckywheel, it feels different (slower, clumsier maybe?). Is there a way to rewind the object to the original position and then animated it but using a different rotation value?
2. In my example, how can I know on which color the luckywheel lands on? I know there will be always 12 possible results, each one using 30 degrees out of the total 360 degrees available in a circle, but how do I know precisely in which color it lands?

 

I've attached CodePen link and my current working code. Thanks for any ideas!

See the Pen yLMpORK by asantos-the-sasster (@asantos-the-sasster) on CodePen

[GreenSock]

Welcome to the forums, @andufo.

 

It looks like you were using a REALLY old version of GSAP. I'd strongly recommend updating. GSAP 3.x is smaller and more streamlined. See

 

I took a crack at updating your CodePen and I console.log() the selected element: 

See the Pen MWprJJZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

 

[andufo]

Hi! Yes, it helps a lot. Now I can easily set a data- attribute to get a specific name for the selected color in the luckywheel. Thanks! That covers both of my questions perfectly.

[GreenSock]

There were quite a few issues with the original code, but the reason it felt slower on the 2nd and 3rd spin was because you were picking a rotation between 1800 and 3600 for all 3 spins. So let's say the first spin was to 2500, for example. That means your spin would animate from 0 to 2500. That's quite a distance. Now let's say the 2nd spin was to 2800. Well now we're going from 2500 to 2800 over the course of the same amount of time, thus it feels much slower (because it's only going 300 degrees total). 

 

If you look at my approach, I'm ADDING a random number between 1800 and 3600 each time to whatever the current value is. So it'll always have a similar feel. 

 

Does that clear things up? 

[andufo]

Yes, thanks again! I just replicated your code on my dev environment, it's working great