GreenSock JavaScript API Docs | All Packages | All Classes | Index | Frames No Frames |
RaphaelPlugin

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

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

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.

Thu Dec 20 2012, 04:30 PM -06:00