Raphael Plugin for Free Transform Tool

[swampthang 112 Likes (Specialist)]

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.

[Carl 9,066 Likes (Superhero)]

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.

[swampthang 112 Likes (Specialist)]

Thanks, Carl. I decided against using Raphael and of course, the Raphael FreeTransform tool. Ended up doing this.

See the Pen WxEzgj by swampthang (@swampthang) on CodePen

[Carl 9,066 Likes (Superhero)]

Very nice. Thanks for sharing the demo!