Jump to content
Search Community

MorphSVG - change starting point of both shapes?

ohem 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

Hi, I was just playing with MorphSVG on Codepen.  The findShapeIndex() utility is awesome, but I seem to only be able to change the starting point of one shape, and I can’t figure out how to change the starting point of my second shape (a simple circle).


The circle’s  starting point seems to be stuck on the right side.  Is there a way that I could change it to the top or bottom of the circle, so that both shapes have aligning starting points?


Here is a rough example to illustrate my issue:


Any help is appreciated; this is my first time playing with MorphSVG so I might be missing something very obvious.



See the Pen BKEaMp by ohem (@ohem) on CodePen

Link to comment
Share on other sites

Nah, you're not missing anything obvious. Don't worry. Plenty of people have probably wondered something similar.


But as far as I can tell, there's no benefit to offering the ability to move the starting point on the end shape as well because the whole purpose is to simply figure out how to align the points (in order) between the start and end shapes, and doing so only requires shifting the points in ONE of the paths. Think of it like a combination lock where you have to spin a dial to line a particular number up with the top of the outer ring - even if you could move the outer ring independently, you'd still end up with the numbers around the edges aligning in the same way as they'd be if you only moved the inner dial. 


That probably doesn't clarify things very well (sorry, I can't think of a better way of explaining it right now), but I guess my point is that I couldn't visualize any matching of points that couldn't be achieved simply by altering the order of points in only the starting shape. 


Maybe think of it this way - imagine labeling each point on each shape in the order you WANT it to be. So in this case, you said you wanted the circle to start at the TOP instead of the right side. So draw a "1" at the top, and then go around the circle "2", "3", "4". We're not actually changing anything about that path - we're just visualizing what we want. Now label all the points of the starting shape in its native form. I bet the numbers aren't matching up the way you want (if "1" from the start went to "1" of the end). All we need to do is figure out how many places to shift the points on the starting shape so that the "1" labels line up. Done. So even if we never changed the points on the end path, it all boils down to shifting the points in the starting path to line up with the corresponding points in the end shape (and remember, MorphSVGPlugin always adds extra points when necessary to ensure that the starting and ending paths have matching numbers of points). 


All that being said, maybe it'd help if you explained what effect you feel like you can't get currently and maybe we can help. For example, "I want the tip of the first finger to animate to the top of the circle" (or whatever). Also remember than you can flip the direction of the path by using a negative shapeIndex. 

  • Like 1
Link to comment
Share on other sites

Also, weirdly I cannot seem to reverse this animation: http://codepen.io/ohem/pen/GZLJxP


If I try to start with the circle, nothing happens at all: http://codepen.io/ohem/pen/WwWvJN 


Not sure what I could be missing...


You can only morph <path> elements. Kinda makes sense if you think about it because a <circle> couldn't somehow be manipulated to be something other than a circle. Don't worry, though - MorphSVGPlugin has a built-in utility for converting various SVG shapes into native <path> elements, like:


Check out the docs, including a video: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/convertToPath/

  • Like 1
Link to comment
Share on other sites

Okay, this is really weird.  This works on Codepen: 

See the Pen MyRwxJ by ohem (@ohem) on CodePen


But locally I can't seem to get it to morph back to it's original shape.  


The version of MorphSVG they have at my job is 0.3.0; not sure if that's an old version, or what could be causing the discrepancy?  Also I'm using GSAP 1.18.0, because it's the newest version on the ad serving company's CDN.  But even with 1.18.4 it still seems to not want to go back to it's original shape.

Link to comment
Share on other sites

Ooh, interesting.  I thought I was going crazy for a second.


Is it okay to use MorphSVG 0.8.4 with TweenMax 1.18.0?  

(I wish the various ad serving companies would update their CDNs more often!)

Link to comment
Share on other sites

oh... BTW - not that it has anything to do with the morphing, but rather just an SVG tidbit.


On the first post, you mentioned the circle starting point being stuck on the right side. As far as I know, SVG circles always start at 3 o'clock. If you ever need to do something with their start point like animating the stroke and don't want it to start there, you can always rotate it where you need it.


I had to do that on two of my recent CodePens. My movie pen used a circle stroke for a radial countdown transition and my pie chart demo needed to start the chart at 12 o'clock instead of 3'oclock.



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