Skip to main content

Posts

Showing posts from January, 2013

Animating objects in JavaScript

I needed a way to animate any property of an object in JavaScript (not necessarily even an element on the page). I did not find anything satisfactory (to me) online, so I decided to write my own. This is the result.

It's a simple animation class, loosely modeled on the Android animations API (in fact, the built-in animation interpolators are simple translations from the Android source code). It is very flexible, and supports animating any numeric property of any object. Animations run at 60 Hz to be fluid if UI elements are being animated.

Features:
Animate any numeric valueStart/stop, pause/resume/restartRepeat - for a specified count or infinitelyReverse animation on repeat.Callbacks for start, stop, resume, end, repeatCustom interpolatorsNO dependenciesDownload the code here (includes documentation for all methods).
A demo of the code is available here. It simply animates a box moving to the right, but demonstrates how the class is used. Prototype is used in the demo, but not re…