Jump to content
GreenSock

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

RaphaelPlugin with Snap.svg

Recommended Posts

I've been moving toward using Snap.svg over Raphael (both from Dmitry Baranovskiy) where Snap.svg is merely a fork of Raphael and dropping support for VML (old IE support). Now I'm wanting to insert some GreenSock magic dust to my SVG elements and I figured I'd just include the RaphaelPlugin and run a quick test. That played out well and seems to still work fine, but upon further fiddling I'm wondering if it's possible that there's actually more changes going from Raphael to Snap that is restricting me from doing more. For instance I can do a basic tween (that I believe I even pulled out of the RaphaelPlugin API docs) that works great.

var rect = paper.rect(50, 250, 200, 100);
rect.attr('fill', '#f00');
TweenLite.to(rect, 3, {
    raphael: {
        fill: '#00f',
        x: 100,
        y: 200,
        width: 100,
        height: 50
    },
    ease: Bounce.easeOut
});

But when I try to do something a little more fancy like animating an SVG text node element, I get some errors coming out of the _getTransform method in the plugin. I'll let this jsfiddle do the rest of the explaining. Just comment/uncomment some lines to see expected/unexpected behavior, etc. My main question is whether or not the RaphaelPlugin should work with Snap just as well. If that's the case, is there any plans to port the RaphaelPlugin to work with Snap? (I believe it's gaining quite a bit of popularity) And actually now that I think about it, maybe I should even test a text node with Raphael to see if it's something that's just not in the plugin for Raphael either. I took a glance at the source of the RaphaelPlugin and noticed that there's a few places where the string "raphael_" is prepended, maybe we just need to know what that would be in Snap and voila? (Highly doubtful, it's never that easy :P) All that said, I'm really hoping I'm simply not targeting something properly and I just need to make some minor adjustments to the fiddle.

Link to comment
Share on other sites

Hi Anthony,

 

My best guess is that since the libraries are not identical (Raphael and Snap) the Raphael Plugin works on some attributes and properties and in others don't, although Carl or Jack are more suited to indicate that.

 

What you could do is tween a dummy object and pass those values to each text element's scale using a Snap SVG method.

 

Another choice is store the letters in an array and tween their size, like this:

http://jsfiddle.net/sb9tG/18/

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Agreed, pretty sure it was you who brought up the "dummy object" solution in a previous post of mine for a progressive path animation and that little trick has found it's way into a couple of nice places in my codebase already. :) So many thanks for that elegant solution. Is there any advantage to having a plugin then? Other than not having to create a "mock object" to use a guide for the element(s) animating?

 

I'm sure Carl or Jack will respond to the plugin specifics when they can.

 

Thanks again Rodrigo!

Link to comment
Share on other sites

You're welcome Anthony.

 

Well the plugin works on Raphael elements, perhaps porting it to snap svg could enter in Jack's todo list if there's enough demand for it, but in the mean time the choices are either hack the Raphael plugin or create your own code to make GSAP work on Snap svg.

 

Rodrigo

Link to comment
Share on other sites

Yeah, chances are Raphael and SnapSVG objects have very similar methods and API structure. The main functionality of the Raphael plugin is the tweening of attributes on svg nodes.

 

From your fiddle and quick browse of the SnapSVG docs it seems like both Raphael and SnapSVG elements have an attr() method.

 

I was able to get the opacity to work in the staggerFromTo() using raphael plugin, but scale and rotation didn't work. Not sure at the moment why.

 

Most likely it will take us some time to get familiar enough with snap API to figure out what sorts of properties we will have to manage with a plugin. If we come up with anything we will be sure to report back.

  • Like 1
Link to comment
Share on other sites

Agreed Carl, they are quite similar. While I'll be creating a mock object as I've done in the past I am also looking at more of the innards of the RaphaelPlugin and the first issue I'm noticing in the _getTransform method is the transformation matrix. Looks like in Raphael (docs: http://raphaeljs.com/reference.html#Element.matrixmatrix was a readily available property on the element which doesn't exist in Snap (search docs for matrix: http://snapsvg.io/docs/), but certainly there's a way to get that data from an element. There appears to be a way to manipulate matrices, but I haven't determined how to read the current matrix yet.

 

There's a few things I'm not too sure of in the plugin, but I'm going to take a close look at the template plugin and see if I can see more of what's going on "inside the sock". Is there possibly a specific plugin someone could recommend that has a very straight forward connection to the rest of TweenMax/Lite that would be best to look at to analyze and get a better picture overall? If I make any progress on porting to Snap I'll be sure and report back as well.

Link to comment
Share on other sites

Update. I believe I have this working. Though i haven't thoroughly tested everything yet it seems the only thing I've had to alter so far is the way Dmitry handles matrices. In Raphael there was a matrix property on an Element with helper methods attached to it too (like invert()). In Snap to get a matrix I'm doing element.attr('transform').localMatrix (though we also get .globalMatrix, .diffMatrix, among some others) and to handle the inversion there's some proto methods. I'll let this fiddle explain it further. I'll be forking GreenSock either later tonight or tomorrow and see if I can further test etc and once I feel good about it I can create a pull request or something for Jack or whomever to approve/alter/etc. Question, if the changes are so small (so far only about 3 lines have changed) would you want to create another plugin (SnapPlugin) or make the Raphael one handle both? I'd imagine a new plugin but would love input from anyone.

Link to comment
Share on other sites

Thanks for the update Anthony. 

I can assure you, you have a better understanding of the inner workings of the RaphaelPlugin than I do.

 

My gut feeling is that even if a SnapPlugin only has 3 minor differences than Raphael, we'd probably want a separate SnapPlugin. It would probably be weird telling Snap folks just to use the Raphael plugin, and who knows how Snap will evolve over time.

 

Please keep us posted on your progress. At the moment we are super-slammed with some high priority features / tasks. It might take us a little time to actually get to digging into your code, so please excuse us if we don't jump on it immediately.

 

Its very cool that you are investigating and experimenting with this.

Link to comment
Share on other sites

  • 5 months later...

Yeah, chances are Raphael and SnapSVG objects have very similar methods and API structure. The main functionality of the Raphael plugin is the tweening of attributes on svg nodes.

 

From your fiddle and quick browse of the SnapSVG docs it seems like both Raphael and SnapSVG elements have an attr() method.

 

I was able to get the opacity to work in the staggerFromTo() using raphael plugin, but scale and rotation didn't work. Not sure at the moment why.

 

Most likely it will take us some time to get familiar enough with snap API to figure out what sorts of properties we will have to manage with a plugin. If we come up with anything we will be sure to report back.

 

Would you mind please posting a syntax example of staggerFromTo() ? I have not been able to get it working. I have been able to tween objects with, and without the plugin... but have yet to get the stagger to work in any attempt. Thanks in advance.

Link to comment
Share on other sites

This is an example of staggerFromTo() using the RaphaelPlugin

TweenMax.staggerFromTo([square, circle], 1, 
{raphael:{fill:"green", rotation:0}}, 
{raphael:{fill:"yellow", rotation:360}}, 
0.5)

http://codepen.io/GreenSock/pen/vgxnb?editors=001

Link to comment
Share on other sites

Please ignore my request for an example earlier, I have figured it out. For anyone else looking for a good ( I think ) working example:

 

See the Pen eGrhk?editors=100 by tripl3inf (@tripl3inf) on CodePen

 

@anthonygreco

 

Thanks a lot for porting over the plugin. I have been knocking my head the last couple nights trying to use these frameworks together. Its on now!

  • Like 1
Link to comment
Share on other sites

  • 6 months later...

Hey guy's,

 

I hate my first post here to be a request but where can I find this mod of the Raphael plugin for Snap.svg?

 

Or what "3 lines" do I need to adjust @anthonygreco ?

I went out on a limb to do this project with two unknown factors: GSAP and Snap and even though the Raphael plugin works (for now) I would like to cover my bases as much as possible.

 

@Carl, I love the framework. Simple, elegant and efficient !

Link to comment
Share on other sites

Hey Anthony,

 

Nice to see you back here again. Thanks for popping in. Hope you are well. 

Yeah, it certainly seems that SVG is hot right now and lots of folks are looking to do way more animation than what CSS, SMIL, etc offer. 

 

In addition to our DrawSVGPlugin, Jack has made huge improvements to how our CSSPlugin handles cross-browser animation, transform, transformOrigin issues related to SVG children: http://css-tricks.com/svg-animation-on-css-transforms/

 

I think a lot of people will be surprised how many issues there were and how easy it is now to animate SVG children just like any other DOM element. 

 

It also seems people are still interested in your SnapSVG plugin. If you ever have the time I think it would be great to see the GitHub repo updated with a very concise feature list and perhaps a few CodePen / jsFiddle demos illustrating basic usage. We would certainly help you spread the word.

 

Thanks again for helping out and checking in!

 

Carl

  • Like 2
Link to comment
Share on other sites

@Carl,

 

Awesomeness all around. I just switched jobs this week (the last one wanted my sanity) and should have more time to put into it again soon. Will keep you all apprised of updates! :)

  • Like 1
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.
×