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}) );
