Jump to content


SVG inversing

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


I just started working with morphSVG with great results. The last version of a series of animations I am doing has a problem however. Between two steps in the animation, the whole svg is inversing inside out. I tried to change the SVG points around a little without leaving the design too much but to no avail. Is there an easy fix, or something I can take care of to avoid this?

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

I am sorry, I tried to add a Codepen, but apparently this is the plugin overview. How can I use morphSVG in a Codepen and have a working link?

Link to comment
Share on other sites

If you Fork that pen, you then have a pen that loads all the premium plugins. You would just need to add your own code at the point.


Another option is you can create a new Pen from scratch and load the tools you need with the urls of the scripts you need.




Here is a pen you can fork that loads MorphSVG and TweenMax


See the Pen RxBOrb by GreenSock (@GreenSock) on CodePen


  1. Run Pen
  2. Edit on CodePen
  3. Fork
  4. Add your own code
  5. Save
  6. Paste link in reply


  • Like 3
Link to comment
Share on other sites

See the Pen RxBzpe by bparticle (@bparticle) on CodePen

Looks like this Codepen is going to work :) Thanks for the help there


So, I have a bunch of these animated characters and usually it works pretty well. Only sometimes the SVG points seem to fold and flip and turn inside out. They are supposed to be very simple animations, and I try to keep the exact same number of points and move those around, but then there is a mixup. Understandable, granted, but maybe there is a solution to my problem?

Link to comment
Share on other sites

I just learned about the index tool which is a good start for this exploration. It doesn't seem to find ant points though...  EDIT: I found out how to use the tool. Great, so now my (better researched) question is: how can I fix #step4 to #step5? No matter which point I chose, it folds inside out anyway. Do I have to map every single point individually? I hope now because I can't currently invest the time to do that :(

See the Pen opMraP by bparticle (@bparticle) on CodePen


Link to comment
Share on other sites

Thanks for the demo. I reduced down so I could just see what #step1 looked like(added stroke and fill).

The findShapeIndex tool requires a closed path: https://greensock.com/docs/Plugins/MorphSVGPlugin


it appears #step1 is not closed and you have a path / stroke kind of floating around on its own

in the demo below #step1 has a green fill.


See the Pen NXBQxR?editors=1010 by GreenSock (@GreenSock) on CodePen


For the best results use a closed path. 


Also it looked like you edited previous posts and changed the demo while I was trying to help. Please just reply to the thread with updated (new) demos. 

Your updated demos look very different then the one I initially forked. 


If you have further questions please reply and clarify. thanks.


  • Like 1
Link to comment
Share on other sites

Hello again. I was indeed trying out that library while posting, so in the end I was able to put the codepen in the right place to ask my question. Step1 doesn't pose a problem. I'm struggling with the transition between step 4 and 5 (I actually edited my question). I'm posting the same pen with the relevant changes (please note that all these steps are hidden because the first shape changes shape according to these invisible paths or steps) 

See the Pen opMraP by bparticle (@bparticle) on CodePen


Link to comment
Share on other sites

Hi @bparticle,


I looked at the individual parts of the SVG.


See the Pen 5640f95d0efe846102b806e64b98a5dc by mikeK (@mikeK) on CodePen


It is difficult for me to imagine what intermediate levels or which final "picture" should arise.


One way to control morphing is if both paths contain the same number of anchor points.


Best regards




  • Like 4
Link to comment
Share on other sites

Thanks a lot for doing that mikel! So helpful.


@bparticle I'm in the same boat as Mikel, not really sure what the desired results are. It might help if you could provide a set of keyframes (static) for what the beginning, middle and end state should look like.


I'm kind of assuming you want something that looks like an A to morph into a rectangle or square. The hollow part of the A is always going to give you trouble.

I did a quick experiment by drawing something that isn't an A and putting a triangle over it




For the the thing that looks like a sqaure (#end) I drew a square using the Pen tool starting in the top center and when I was done I added 4 additional points along the bottom so that the bottom points in the A thing had matching nearby points to move to.




I also added an additional point in the top center of the A thing so that it would split the A in half and that point would go to the top-center of where I started drawing my box thing. The end result is this.



See the Pen OzoyrL by GreenSock (@GreenSock) on CodePen


The moral of the story. You may need to finesse things a bit. The morphing algorithm does what it finds to be most efficient. It can't always be what you want, especially with complex shapes with non-matching numbers of points. 


Note: I left the little triangle white so you can see it as an individual element. In real life it would match your background color.



  • Like 5
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.