Pablo is a lightweight, expressive JavaScript SVG library. Pablo creates interactive drawings with SVG (Scalable Vector Graphics), giving access to all of SVG's granularity and power.
Using CSS transitions of CSS transformations is one of the most reliable and simplest ways to achieve animation. At it's simplest, this kind of thing is currently required:
var body = Pablo('body');
var svg = body.svg({width:500, height:500});
var circle = svg.circle({r:50, cx:50, cy:50});
circle.cssPrefix('transition', 'all 1s ease-in');
window.setTimeout(function(){
circle.cssPrefix('transform', 'translate(100px, 200px)');
}, 4);
The setTimeout is awkward and could be handled by a method. The use of cssPrefix('transition') could be rolled into cssTransition() method and the use of cssPrefix('transform') into acssTransform()method.allis used in the example because the alternativecssPrefix('transition', Pablo.cssPrefix('transform') is not only ugly but also sometimes unreliable, at least in Chrome, (when exactly would be worth pinning down) - it seems Chrome can ignore a CSS rule when it doesn't recognise some of the comma-separated CSS properties in the transition list.
Using CSS transitions of CSS transformations is one of the most reliable and simplest ways to achieve animation. At it's simplest, this kind of thing is currently required:
The setTimeout is awkward and could be handled by a method. The use of
cssPrefix('transition')could be rolled intocssTransition()method and the use ofcssPrefix('transform') into acssTransform()method.allis used in the example because the alternativecssPrefix('transition',Pablo.cssPrefix('transform')is not only ugly but also sometimes unreliable, at least in Chrome, (when exactly would be worth pinning down) - it seems Chrome can ignore a CSS rule when it doesn't recognise some of the comma-separated CSS properties in the transition list.