Question

I’m working on a small wine lottery web-app for the company. When it comes down to 10 numbers it will place them in a circle and spin a wine bottle; however, I haven’t been able to get the animation for the spinning bottle realistic.

The app will pick a number then, consequently, an angle that points towards it. After that it starts spinning around 10 laps then ends up pointing towards the number.
Should I simulate friction or use some sort of curve to do this?

Just to clarify: I’m looking for a formula or something similar to set the bottle’s speed.

Suggestions?

Answer 1

Since you’re using -webkit-transform, why not set the -webkit-transition property to ease-out?

Sample fiddle: http://jsfiddle.net/dosboy/KGhAJ/