Jump to content
GreenSock

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

Problem with MorphSVGPlugin

Recommended Posts

Hi, all.

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

I use these plugins

But when I watching moving about MorphSVG
 
I could not connect properly library. Can you help me to fix this problem?
ASK_SVG.jpg
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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>  
???
Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

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:
 
ASK3.jpg
 
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)?
 
Link to comment
Share on other sites

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;}
  • Like 1
Link to comment
Share on other sites

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