Marcin Ignac

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 animation libraries 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:

Additionally there is the same problem with procedural animation coming over and over again:

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.

<script type="text/javascript" src="timeline.js"></script>   
<script type="text/javascript">     
    var rect = {x: 0, y: 0}     
    anim(rect).to({x:50}, 1);       
</script>

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

<script type="text/javascript" src="timeline.js"></script>   
<script type="text/javascript" src="timeline-gui.js"></script>      
<script type="text/javascript">     
    var rect = {x: 0, y: 0}     
    anim("rect", rect).to({x:0}, 0).to({x:50}, 1);
</script> 

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:

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

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

blog comments powered by Disqus