Jump to content


Wheel spin woes with Greensock v12 JS

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

Hey guys,


I've been a long-time user of the Greensock platform, however I am having trouble getting the desired effect in Javascript. The issue is a follows:


I have a prize wheel (a la wheel of fortune) which has 16 parts. The user clicks a button to spin the wheel and the wheel spins for a set duration (to match a sound effect). The landing (prize) location of the rotation is determined by the server and that all works. While I can get the wheel to land at the proper, pre-determined, positions, I can't get it to do so smoothly. My poor attempt is below. Now I know this is not the proper way to do it for the obvious reason, it is not a smooth motion, but it's a close as I could get to the effect I need.


What I want is since i know the destination rotational value, I want to have the wheel spin (ease in to full speed, rotate X amount of times, then slowly ease out [decelerate] to the desired rotation). The question remains, how the heck can I do this? Any help would be much appreciated.


var tl = new TimelineMax();
tl.append( TweenMax.to($('#wheel'), 1, {css:{rotation:360}, ease:Quad.easeIn}) );
tl.append( TweenMax.to($('#wheel'), .75, {css:{rotation:360}, ease:Linear.easeNone, repeat:10, yoyo:false}) );
tl.append( TweenMax.to($('#wheel'), 1, {css:{rotation:data.degrees}, ease:Sine.easeOut}) );

Link to comment
Share on other sites

Yeah, I see the issue. This is exactly the type of problem the ThrowPropsPlugin for ActionScript solved: http://www.greensock.com/throwprops/


It isn't currently available for JS.


Have you tried 1 super long tween with a very very high rotation using ease:Sine.easeInOut?


Let's say your server returns a value of 45 degrees and you want to spin 5 times before landing on the 45 degree mark.


var dataDegrees = 45 // you'll get this from server
var rotations = 5
var targetDeg = (360 x rotations) + dataDegrees;

tl.append( TweenMax.to($('#wheel'), 5, {css:{rotation:targetDegrees}, ease:Sine.easeInOut}) );


although the starting eases and ending eases will be different, overall I think the effect will be smoother.

Link to comment
Share on other sites

I love you. You are the man. This is perfect! Much better than what I had. Such a simple solution...thanks so much.

  • Like 1
Link to comment
Share on other sites

I very glad this was a such a suitable solution for you.

Between you and me, I probably would have initially approached it the same way as you.

I have these bright ideas about once a month. I guess the other folks will have to wait ;)

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.