Jump to content


Tweening path morph with RaphaelJS and TweenMax

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



is it possible to tween or trigger a Raphael Path morph with TweenMax? 


var path1 = "M0 0 L0 501 L200 80";

var path3 = "M0 0 L501 0 L501 501 L0 501";

var paper = Raphael($('.contMorph').get(0), 500, 500);

var shape = paper.path(path1);
shape.attr('fill', '#333333');
shape.attr('stroke', 0)


TweenMax.to(shape, 3, {raphael: {fill: '#ff00aa',path:path3}});


This didn't seams to work. 

Cause of loosing control i don't want to use the native Raphael animation. :( 


Someone know a workaround for this? 


Thx and greets, 

The Monkey







Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


No, GSAP does not support tweening an svg path morph directly.

I did some quick research and it seems that SnapSVG (basically a new version of Raphael) makes it pretty easy to morph paths.

I found a jsfiddle demo that I edited to illustrate how you can create a GSAP animation sequence that calls a function that handles this SnapSVG morph for you.


//SnapSVG code
s = Snap(400, 620);
var path = s.path("M0 0 L0 501 L200 80");
function pathMorph() {
   path.animate({ d: "M0 0 L501 0 L501 501 L0 501" }, 1000, mina.bounce);

//GreenSock animation code
var tl = new TimelineLite();

tl.from("h2", 1, {x:400, opacity:0, delay:1})
  .call(pathMorph) // place pathMorph in middle of animation sequence;
  .to("h2", 1, {x:200, opacity:0}, "+=1"); //fade out text one second after pathMorph called


  • Like 2
Link to comment
Share on other sites

  • 6 months later...

OK.. so If we need to animate a vesica pisces into a circle.. .. Can GSAP handle that, or must we use SnapSVG?      


Specifically, I need animate this shape into a perfect circle.


Link to comment
Share on other sites

You can animate a path with GSAP, but you're going to have to manually calculate and set the path attribute in a update callback. 


See the Pen rVjYoK by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Hi guys :)


Blake , well done dude ... :)


but in this case , there's another simple solution : 

See the Pen xGgWWa by MAW (@MAW) on CodePen

  • Like 3
Link to comment
Share on other sites

Very nice! I just modified a helper function I made that converts polar coordinates to cartesian, and didn't even bother trying to update the points directly. Yours is definitely much simpler  :ugeek:

Link to comment
Share on other sites

i just noticed something with yours. Shouldn't the height get smaller as the width decreases since it's supposed to be the intersection of two circles? 






Link to comment
Share on other sites

Dude ... you've used Math ( Correct way , complicated + more code ) , in the other hand i just used tricks ...  same visually result  . Yep , from Mathematical view , yours is absolutely correct way , but from visually i think mine  ;)


don't forget what's the requested goal , just morph to prefect Circle .

Link to comment
Share on other sites

Lol. Fair enough. I didn't know if you had another trick up your sleeve to figure that one out too. 


And yours probably does look better visually. I saw that monster eye before you changed it, which I thought was pretty awesome. 

  • 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.