Jump to content
Search Community

Raphael Plugin for Free Transform Tool

swampthang test
Moderator Tag

Go to solution Solved by swampthang,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm looking at the Raphael FreeTransform tool on github and wondering if anyone has been able to successfully integrate that into GSAP via the Raphael Plugin.


Need a FreeTransform tool and that one looks pretty good. Just don't want to do anything that causes conflicts with GSAP, etc.


Also, really all I need is the ability to add selection handles that allow resize and rotate. I of course need drag but not sure if that will conflict with GSAPs draggable. 


Any insight from someone with experience in this would be greatly appreciated.

Link to comment
Share on other sites

It would certainly be possible, but most likely take a decent amount of work to customize Draggable to work the same way as that Raphael FreeTransform tool. 

There is no code in Draggable that is specific to Raphael. Draggable works the same on DOM and SVG elements.

The degree of conflict or issues of mixing GSAP with Raphael will really come down to what methods / properties the API exposes for setting and getting scale, rotation, x, y etc on Raphael objects. 


For instance some libraries make it real easy like having 

//single numeric value
object.x = 50 // very easy to tween with TweenLite

//and others might have an object

object.position = {x:30, y:30}; // annoying

It's been very long time since I've heard Raphael even mentioned around here so I honestly don't know what issues you will face when it comes to animating or dragging Raphael objects with GreenSock tools. 


My suggestion would be to create a very basic demo using the Raphael FreeTransform tool on CodePen that has a simple rect that is transformable. See if you can do a basic TweenLite tween on that element. If not send us the demo and we can take a look at it. 


Perhaps others will have more to say. Wish I could be of more help.

Link to comment
Share on other sites

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
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...