By CHI WAI LAU

Rethink Animation

I looked at how animations work in some of the most popular environments such as jQuery, MooTools, CSS3, and Cocoa. I noticed that there’s a common pattern — the effects are all bound by time. Those time-bound animations generally work well with simple motions. However, the static nature of these animations becomes a limitation since the predefined movement doesn’t adapt well to situations that require adjustment.

To address that issue, I implemented Fx.Spring — a custom animation effect that is modeled after the physics of a spring. The effect is not time-bound; instead, the effect duration is dynamic and is dictated by 2 constants: spring stiffness and friction. When friction is zero, you get a bouncy effect that goes on forever and greater spring stiffness means higher bounce frequency. When friction is present, the bounce will stop eventually and greater friction means that the bounce frequency decays faster over time. Not only does the spring animation render a realistic effect, it also adapts to varying situations more naturally as the movement is not predefined and is calculated dynamically. A demo of Fx.Spring here is probably worth a thousand words:

In an effort to show how the spring animation works, I made Fx.Spring an open source project on Github. I hope it helps you rethink about animation!