Smoothing Slow JavaScript Animation/Parallax

published:

2009.03.04

topics:

games

javascript

In both film and computer graphics, the illusion of animation and motion is created by rapidly displaying a series of slightly different still images. This illusion starts to break down for most people somewhere below 30 frames per second (FPS).

The minimum distance an object or image can move in a web browser is one pixel, and the size of a pixel is still large enough to be very much perceptible in most situations. As a consequence, in order to produce smooth, fluid motion, an object moving one pixel at a time must move 30 pixels in one second in order to achieve 30 frames per second animation. That's surprisingly fast movement.

The noticeable stop/start ticking motion of objects moving slower than 30 pixels per second in a web browser has always bugged me. Take for instance my example of parallax scrolling animation of clouds in a sky. The foreground clouds are moving 10 pixels/frames per second. The motion looks good (though not great). Compare this to the background clouds which are moving two pixels/frames per second. They are very jerky. View the example after the jump.

Continue Reading Post and 13 Comments…