Rotating Wheel Issues

[kurtbr]

I'm struggling to find a way to use the GSAP to achieve what I didn't expect to be so hard: a spinning wheel with an initial acceleration and then a deceleration to stop (at a predefined angle). I'm specifically trying to make a roulette wheel for a game, but this would apply to any spinning wheel type scenario.

 

I've played around and looked at several of the Club GS plugins and couldn't find a way to use them for my needs.  Just using a series of timeline events out of the box gets me close... here's an example of initial acceleration going into a longer spinning segment. 

 

tl.to(el, 2, { rotation: 360 * .5, ease:Power1.easeIn })
  .to(el, 4, { rotation: 360 * 1, ease:Power1.linear })

 

...I had hoped with several timeline events at specific "speeds" I could simulate the acceleration/deceleration effect I was going for, but unfortunately it's near impossible to have the one tween end at the exact same rotational velocity as the next one is starting at.

 

What I would like to do is to set a specific ending angle (eg. 360*10 + 45 = spin ten times, plus another 45deg) and then have the velocity of the rotation vary based on some custom bezier curve.

 

Can anybody help me out with this? This must be possible.

[Rodrigo]

Hi, 
 
Sorry to hear you're having troubles.
 
Did you try the ThrowPropsPlugin?, it includes a velocity tracker and you can set it up to rotate at a certain speed (in this case degrees per second) and to smoothly stop the wheel after some time, for example:

var wheel = $("#wheelElement");

TweenMax.to(wheel, 3, {throwProps:{rotation:360}});

In this case the element will rotate at a speed of 360 degrees(1 complete cycle) per second and it'll stop after 3 seconds. You can also set up a custom resistance (default is 100) and a lot of very cool stuff with it.

 

Take a look at the docs:

http://api.greensock.com/js/com/greensock/plugins/ThrowPropsPlugin.html

 

Hope this helps,

Cheers,

Rodrigo.

[GreenSock]

Oh, you're gonna LOVE this. We're about to release a demo that does almost exactly what you're talking about here. 

 

The challenge is twofold:

1. You need to accurately track the velocity
2. You need to create a tween that smoothly interpolates between an initial velocity that you define (which is often based on user interaction, like the speed of a swipe) and glides to a stop at a particular value. But if the initial velocity is super high such that it can't possibly decelerate smoothly to the end position (like if you start out rotating clockwise at 1000 degrees per second and you want it to end up back at -100 degrees), it needs to smoothly snap-back without jerking suddenly. 

The algorithms for #2 are tricky (at least for me). I spent weeks on it, many hours per day. That's what eventually culminated in ThrowPropsPlugin. It's perfect for this sort of thing, especially with the new version that accommodates dynamic end values or notches or even functions that let you run your own logic to determine the landing spot. 

 

Don't worry, this demo will make it clearer. We're planning to post it early next week. Stand by. It's not quite ready yet. But I'm confident you'll really like it when you see it. 

 

Watch the web site and your e-mail for the announcement. 

[kurtbr]

Thanks Rodrigo, I appreciate the help!

 

I had tinkered with the ThrowProps plugin but didn't get the result I wanted at the time - I'll try again and post back if I have any specific issues.

 

One question right off the bat: your example is perfect as far as the general rotational deceleration animation goes, but I can't directly control the exact angle that the rotation comes to a stop on.

 

This "Wheel of Fortune" example in KineticJS is identical to the scenario I'm trying to achieve. This sample is using Kinetic's animation API where the animation code is hand-written and run frame-by-frame. Is it possible to reproduce this exact same demo using GASP and with all the benefits it brings (less code, more flexibility, better performance)?

 

thanks again for your help!

[GreenSock]

Yes, I'm not sure if you read my post above, but it's definitely possible. 

 

This is NOT ready for launch quite yet, but check this out: http://www.greensock.com/js/demo/throwprops/

 

Scroll down to the second example (the spinning knob). Select the "snap to 90-degree increments" checkbox. That's what you're looking for, right? But in your case, you'd set a very specific angle (not just any 90-degree increment), right? That's easy, by the way, with ThrowPropsPlugin. You just set the "end" value. Like:

TweenLite.to(element, 2, {throwProps:{rotation:{velocity:100, end:142}}, ease:Power3.easeOut});

That'll start the rotation at 100 degrees per second and make it end at exactly 142 degrees. 

[Rodrigo]

Yes, I'm not sure if you read my post above, but it's definitely possible. 

 

This is NOT ready for launch quite yet, but check this out: http://www.greensock.com/js/demo/throwprops/

 

Outstanding as usual!!!

[kurtbr]

Awesome, Jack!

 

Yes, I had not read your previous post at the time I was writing my last one. I'm looking forward to the final demo! I really appreciate the support and attention you and others have given (not just to me - I've read several threads that have helped greatly).

 

Yes, it looks like this demo is exactly what I'm looking for, only as you noted I'll need to set a specific ending angle (and in my case, the starting velocity will be a static value - not based on user input).

 

FYI - the demo as is isn't really working on a non-touch device. I couldn't get the thing to spin, it always stopped as soon as the mouse picked up.  It works fantastically on my iPhone though!

 

thanks again

[GreenSock]

FYI - the demo as is isn't really working on a non-touch device. I couldn't get the thing to spin, it always stopped as soon as the mouse picked up.  It works fantastically on my iPhone though!

 

Wait, it doesn't work for you on your desktop? I wonder if you happened to hit it just when I was uploading a new file or something - I have looked at it on every browser I have and the wheel works great. You clicked on it and dragged to rotate/spin, right? And you were definitely looking at this URL, right?: http://greensock.com/js/demo/throwprops/

 

Please let me know if it's working for you now (maybe clear your cache) and if not, tell me which browser and operating system you're using. 

 

Thanks!

[kurtbr]

Jack - not to worry, it does work.

 

I should have clarified - I was using the trackpad on my macbook, and it's really hard to properly simulate the click, drag, let go gesture. If you use a 3-finger scroll you can move the wheel, but it just stops as soon as you pull off. With a little practice and using true click + drags, I got the action to work as expected.

 

 

It works GREAT on a mouse and on a touch device.  It's just the nature of the trackpad that makes it a bit challenging (or impossible if you try just a single 3-finger drag style gesture).

[GreenSock]

Phew! You had me worried there. Thanks for confirming that it does work as intended. We should be announcing this demo in a few days and posting updates to ThrowPropsPlugin and Draggable too.