Question

I know there are a lot of good JS packages that exist that include animation libraries, but there is a simple animation that I am writing that slides a DIV around a page. Needing all of Jquery for this seems like overkill. The animation is workig great, and now I just want to tune it so that it moves as smooth as possible.

Say I want the DIV to move X pixels in N seconds. I can adjust the sleep time between the animation loop and the distance the DIV moves within each loop. What are some good rules of thumb to tune the animation so it looks smooth on most browsers/computers? Are there any good ways to profile the current user and tune the animation parameters on the fly?

Thanks!

Answer 1

If you know the speed (in pixels per millisecond) that you want the animation to use, you can save the current time (new Date()) in each animation tick, then check how much time has passed since the previous tick and multiply that by the speed to get the number of pixels to move.