Package	com.greensock.plugins
Class	public class RaphaelPlugin
Inheritance	RaphaelPlugin TweenPlugin Object

// 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});

Note: a common mistake is to forget to wrap Raphael-related properties in a "raphael" object which is essential for helping TweenLite/Max understand your intent.

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.

globalPivot or localPivot - You can define a custom pivot point around which transforms will be made (rotation, skewX, skewY, scaleX, scaleY, tx, and ty) using either globalPivot or localPivot. The difference between the two is that localPivot uses coordinates according to the object's local coordinate system which is always the same regardless of its scale/rotation/position. Think of it like a point "inside" the object. globalPivot, on the other hand, uses global coordinates according to the Raphael object that contains the tween's target. You can define the pivot point either as an object with x and y properties like: globalPivot:{x:50, y:25} or a comma-delimited string like globalPivot:"50,25".

// tween the rotation to 270 degrees and scaleX to 0.5 using a global pivot point of x:120, y:80 over the course of 3 seconds using an ease of Power1.easeInOut
TweenLite.to(rect, 3, {raphael:{rotation:270, scaleX:0.5, globalPivot:{x:120, y:80}}, ease:Power1.easeInOut});

Note that tx and ty are automatically adjusted to accommodate any rotation or skew during the tween. So, for example, if you tween the rotation and tx and ty, it will work fine but at the end, tx and ty may be slightly different than what you defined for the tween because they had to be adjusted to prevent the object's rotation from throwing off the visual position.

Copyright 2008-2012, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html or for Club GreenSock members, the software agreement that was issued with the membership.