Timeline.js
Timeline.js is a compact JavaScript animation library with a GUI timeline for fast editing.
Again? Why?
As with ActionScript3 there exist many
animationlibraries
for JavaScript.
Some of them are too specific,
some are too structured
and others are too simple. None of them has all the features I needed though:
- simple api
- works easily both for short animations fired by e.g. mouse events and for long sequences
Additionally there is the same problem with procedural animation
coming over and over again:
- tweaking by hand (edit -> save -> refresh)
- hardcoded values
And, Yes. I want to do LONG animation in JavaScript. Like several minutes. Why? Think WebGL demos...
Wouldn't it be easier to use graphical timeline like in Flash or After Effects?
Meet Timeline.js
Let's say we have a rect object with x and y properties and we want to animate x to 50 over 1s.
Thant's it. Done. The general syntax is as follows:
anim(target).to(delay, {property:value,...}, duration, easing);
If we want to edit this animation using graphical timeline just add the timeline-gui.js file
This time I had to add "rect" string as a first parameter that will be used as an animation track name and is required for code export.
I also added second to() call at the beginning to initialize x value, otherwise it would use current value of rect.x (also 0 in this case).
Now we can:
- click each keyframe to edit it's value and easing function
- drag keyframes around
- add new keyframes by double clicking on the animation track
- change animation code by adding new properties to be animated, save and refresh the page without loosing our animation (all the animation data is saved in localStorage and is persistent between browser sessions)
- control animated properties of many objects simultaneously
- play, pause, stop, drag animation time indicator
- change time scale of the timeline
Once we are finished editing we can click export button (three horizontal lines in the top left corner) and we get our animation code ready to deploy!
### What Timeline.js doesn't do
- it can't animate css properties of DOM objects
- doesn't have nested timelines
- is not optimized for efficiency (it doesn't mean it slow though)
- doesn't work in IE < 9 (the GUI requires Canvas)
Notes
Timeline.js v0.1 is a proof of concept first presented at Demodag in Copenhagen, in Spring 2011.
In the demoed version the interface was made using SVG but I dropped it in favor of Canvas in order to remove dependency on JQuery and it's plugins.
Example
http://vorg.github.com/timeline.js/examples/cssAnimation.html
Download
Source code and more examples on Github: timeline.js