Jump to content
GreenSock

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

RaphaelPlugin

Sign in to follow this  

| GreenSock
23758

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

Cook up some delightful animation today with a generous dose of GSAP.

- Team GreenSock
Sign in to follow this  


User Feedback

Recommended Comments

There are no comments to display.



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×