Enables TweenLite and TweenMax to animate properties of Raphael JavaScript objects (see http://www.raphaeljs.com/). Raphael is a JavaScript framework that simplifies work with vector graphics on the web. For example:
// creates canvas 550 × 400 at 10, 50 var paper = Raphael(10, 50, 550, 400); // creates rectangle at x = 50, y = 40, with a width of 200 and height of 100 var rect = paper.rect(50, 40, 200, 100); // sets the fill attribute of the rectangle to red (#f00) rect.attr("fill", "#f00"); // tween the fill to blue (#00f) and x to 100, y to 100, width to 100 and height to 50 over the course of 3 seconds using an ease of Power1.easeInOut TweenLite.to(rect, 3, {raphael:{fill:"#00f", x:100, y:100, width:100, height:50}, ease:Power1.easeInOut});
You can tween any of the properties that you would normally set using raphael's attr()
method as well as the following transformation properties: rotation, scaleX, scaleY, skewX, skewY, tx and ty
and even shortRotation
which will rotate in the shortest direction to the destination value. tx
and ty
refer to the translation x and y properties (e
and f
from the element's matrix). This gives you a lot of control, even beyond what's easily accomplished through Raphael's own methods.
Learn more in the RaphaelPlugin documentation.