Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

RaphaelPlugin

Sign in to follow this  

| GreenSock
24825

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

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.

Get an all-access pass to premium plugins, offers, and more!

Join the Club

We consider it a privilege to serve you. Glad you're here.

- Team GreenSock
Sign in to follow this  


User Feedback

Recommended Comments

There are no comments to display.



Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×