Jun 04

Raphael Plugin: Animation Easing

Raphael is a wonderful Javascript library, used for creating vector graphics, and interacting with SVG/VML elements through Javascript. Raphael allows the developer to interact with these elements through a number of complex animations. 

Until now, the only speed for an animation was a linear movement from one state to another. This plugin extends the animation of Raphael to allow for easing animations. Derived from jQuery Easing Plugin (version 1.3): http://gsgd.co.uk/sandbox/jquery/easing/.

NOTE: As of June 2009, this plugin requires a forked version of RaphaelJS. You can download it here: https://github.com/conesus/raphael/tree. Hopefully, these forked changes will be merged with the master Raphael JS code.

Demo:

View a demo of animation easing techniques here: http://demos.daylife.com/samuel/svg_photo_flipper_prototype.xhtml

To use:

  1. Download raphael.easing.1.3.js from: http://github.com/conesus/raphael-easing/tree/master.
  2. Include the raphael.easing.1.3.js file after your raphael.js file.

  3. Specify the easing technique in the .animate() function, like so:

    Element.animate({"scale": [1.25, 1.25]}, 750, "easeOutCubic", callback);

Available easing techniques:

  • linear
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce

Comments