Problem with MorphSVGPlugin

[BlackStar 0 Likes (Newbie)]

Hi, all.

I just started to learn GSAP, and I got a problem with the connection MorphSVGPlugin library.

I use these plugins

<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>

<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js"></script>

But when I watching moving about MorphSVG

 

I could not connect properly library. Can you help me to fix this problem?

[GreenSock 8,117 Likes (Superhero)]

It looks like you're linking to the special codepen-only test-drive version of MorphSVGPlugin (which only works on the codepen.io domain). If you sign up as a Club GreenSock member (Shockingly Green or above), you get the official version in the download zip that'll work on any domain.

 

Is your error being thrown in a codepen demo or on your own domain? Can you share the link so that we can see what's happening in context? We'd be happy to help; it's just tough to troubleshoot blind. 

[BlackStar 0 Likes (Newbie)]

See the Pen ENwEQZ by BlackStar1991 (@BlackStar1991) on CodePen

I can't understand why it does not work. Maybe you will find my errors.

In addition, can you tell me why not use built-in function for filling SVG 

 

<style type="text/css">

.st0{fill:#D40006;stroke:#000000;stroke-miterlimit:10;}

</style>  

???

[GreenSock 8,117 Likes (Superhero)]

I noticed a few problems:

1. You didn't load MorphSVGPlugin
2. You were referencing an <svg> instead of a <path> as the target of your MorphSVGPlugin.pathDataToBezier()
3. The path is in a completely different <svg> than the element you're trying to animate along that path, so the coordinate spaces are totally different. I'd recommend putting the elements in the same <svg> (though that's not necessary - you could use offsetX/offsetY or a matrix to align things). 
4. There was a <script> tag that was attempting to load a file that wasn't available. 
5. You had a "weight" attribute on your SVG instead of "width".
6. You didn't define a width/height on one of the SVGs, so it was scaled differently in the browser. (not sure if you wanted that)

I'm not exactly sure what effect you wanted, but here's a forked version of your codepen that's working, and makes the white circle jump up and follow the green line:

http://codepen.io/GreenSock/pen/4c156bc4c7852828648cbb9afc17b87a/

 

I also didn't quite understand your question about filling SVG. Can you please elaborate? 

[BlackStar 0 Likes (Newbie)]

Thanks for the help.

The question of filling SVG.

I can't understand why my code here

     <style type="text/css">

              .st0{fill:#D40006;stroke:#fff;stroke-miterlimit:10;}

      </style>

dosn't work.Why my ball doesn't have background: red ? (fill:#D40006).

 

On my main idea it should work as follows:

 

 

1 Frame) the transition from the position (x1 y1) to position (x2 y2) with transformation ball.

2 Frame) the transition from the position (x2 y2) to position (x3 y3) using a form of curved line lite a guide-line.

In a position (x3 y3) my ball should disappearing, and the cycle should begin again.

 

 

How I can use form of  $('#lineC') just like a  a guide-line(path on which to move the ball)?

 

[Dipscom 2,815 Likes (Superhero)]

Regarding this:

 

The question of filling SVG.

I can't understand why my code here

     <style type="text/css">

              .st0{fill:#D40006;stroke:#fff;stroke-miterlimit:10;}

      </style>

dosn't work.Why my ball doesn't have background: red ? (fill:#D40006).

 

 

It will be because in your SVG code, you are overriding the .st0 class with white. Look at lines 6 and 15

 

6:

.st0{fill:#D40006;stroke:#fff;stroke-miterlimit:10;}

15:

.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}

[BlackStar 0 Likes (Newbie)]

Thanks.

I still can not figure out how to connect my frame 3 with the curve of the guide?

 

See the Pen ENwEQZ by BlackStar1991 (@BlackStar1991) on CodePen

 

And yet, how to loop the animation?