Tweening path morph with RaphaelJS and TweenMax

[TweenMonkey]

Hello, 

 

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

 

 

 

 

 

 

[Carl]

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

http://jsfiddle.net/3yyf2xxy/

[HaunGo]

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.

[OSUblake]

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.

[Diaco]

Hi guys

 

Blake , well done dude ...

 

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

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

[OSUblake]

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 

[OSUblake]

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? 

 

 

 

 

[Diaco]

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 .

[OSUblake]

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.