Jump to content
Search Community

Tweening path morph with RaphaelJS and TweenMax

TweenMonkey test
Moderator Tag

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

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

 

 

 

 

 

 

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

http://jsfiddle.net/3yyf2xxy/

  • Like 2
Link to comment
Share on other sites

  • 6 months later...

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

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