Jeff S

That worked really great!

I also want to note, that it is the combination of reordering the elements AND executing an animation that causes the undesirable behaviour. You will notice that you can reorder the elements 20 times and then animate and it looks pretty good. You can then animate 20 times and the behaviour is still consistent. You have to reorder, animate, reorder, animate .... several times to see the behaviour compound like I am talking about.

Hi Jonathan, I have changed my example and codepen code so that "Z-Index +" now says "Order +" and "Z-Index -" now says "Order -" to reduce confusion. You correctly observed that I wasn't using CSS z-index properties and I can see how this could cause confusion. Hopefully this alteration will make it less confusing. My goal with GreenSock is to create vector illustrations and make slight modifications to those illustrations which will allow me to animate from one variation to another extremely rapidly. The codepen example uses a process extremely similar to how I am going about things. In particular, there is no CSS involved. I am working on a process that will allow very complex animations in as little time as it takes for an illustrator to move some vectors around and upload some files. If I were to add CSS into the mix, it would make the process a lot more tedious and essentially defeat the purpose of what I am working towards. So I am really hoping for a CSS-free solution to this problem. I am looking for something along the lines of the fixMatrix (javascript solution) which will keep the workflow to a minimum. If you refer to this thread, you can see that I am doing some weird things that were never anticipated to be done with these libraries and explains better the necessity for the fixMatrix function. I understand your point with the jQuery clone function. In my example, I am removing the element first and then putting it in a different position in the DOM. So there should never be any namespace collision. When you click the "Order +" and "Order -" buttons and you observe the image, you will notice the stacking layer of the SVG elements change. It is basically just changing <g id="layer1"> <g id="humerous" ...></g> <path id="forearm-4" ...></path> </g> to <g id="layer1"> <path id="forearm-4" ...></path> <g id="humerous" ...></g> </g> and back. There seems to be some transformations under the hood (like we had with fixMatrix) causing some undesirable behaviour for me. And the more the elements are reordered, the more compouned the undesirable behaviour becomes. Let me know if that clears things up Jonathan or if you have any other questions.

Use case: As a user, I want to be able to modify the order of the SVG elements and be able to animate predictably afterwards. Codepen: http://codepen.io/anon/pen/pgYmzV Steps to reproduce: Hit the "Go Left" and "Go Right" buttons, this is correct baseline animation I want to preserve. Then if you restack the elements by hitting Order +, it will remove the element and reposition it above. When you hit "Go Left and "Go Right" again, the animation is slightly changed. Now if you hit "Order -" the element will reposition below. Hit "Go Left" and "Go Right" again, the animation is different. Repeating steps 2 through 5 will make the animation progressively worse. In the fixMatrix function, I log the transform element. As you can see, the xOrigin and yOrigin values change each time the stacking order is modified. At this stage, I don't know what to propose for a solution, so I am just opening the dialog about this issue.

It was working without the beginning +/- because it was only replacing the value after. I do think the +/- at the beginning does make it more readable. From the values I saw, in my example (Inkscpae generated svgs), there were never any + signs, but that is not to say some other program wouldn't. I think this is good. I think Jack might be right about the escaping because you can do stuff like [a-z] in the [] and that means a to z. If you wanted to include the hyphen I think you would need to use [a-z\-]. Also, I just remembered Jack, in the original code I made it return n not m. So this: function clean(selectionText) { var e = document.querySelector(selectionText); e.setAttribute("d", e.getAttribute("d").replace(/\d+e[\-\+]\d+/ig, function(m) { var n = +m; return (n < 0.0001 && n > -0.0001) ? 0 : m; }); } became function clean(selectionText) { var e = document.querySelector(selectionText); e.setAttribute("d", e.getAttribute("d").replace(/\d+e[\-\+]\d+/ig, function(m) { var n = +m; return (n < 0.0001 && n > -0.0001) ? 0 : n; }); } Otherwise it was just giving back the scientific notation. Not sure if you used that exact code in the library or not, but just a heads up. So this is what I have now. function clean(selectionText) { var e = document.querySelector(selectionText); e.setAttribute("d", e.getAttribute("d").replace(/[\-\+]?\d*\.?\d+e[\-\+]?\d+/ig, function(m) { var n = +m; return (n < 0.0001 && n > -0.0001) ? 0 : n; }); }

My intention with the new regex was to mean that sometimes the scientific notation will take on the form 2.6e-4 but other times it may take be 6e-4. So the integer followed by the decimal point may or may not exist. But rather than close this off right now, I am going to do some more testing. I will provide a large list of values that are getting replaced so that we can examine them for an exhaustive and minified regex.

I had to make one minor adjustment to the regex: /\d+e[\-\+]\d+/ig needs to be /(\d\.)?\d+e[\-\+]\d+/ig This is because sometimes the scientific notation was taking the form 2.6e-4. Hope you can add this in to the next release. Thanks Jack!

It helps a lot actually. Thanks Jack!

Hello, I am trying to apply a matrix transformation to an SVG group element which already has a matrix transformation applied to it. So, the current transformation is: matrix(1.0349256,-0.46932166,0.45501964,1.1067711,-3.9816644,131.00524) the TweenMax.to transform being applied is: matrix(2.03492, -0.46932, 0.45501, 0.510676, 7.51245, 132.861) the result I am expecting is: matrix(2.03492, -0.46932, 0.45501, 0.510676, 7.51245, 132.861) but the result is that the transform attribute is gone and a new style attribute exists as follows: style="transform: matrix(2.03492, -0.46932, 0.455, 0.51068, 19.2763, 121.028);" The result is very close. The first 4 numbers in the matrix are great. The last two, I am confused about. I don't mind doing some preprocessing to get the matrix into the right form, but I am unsure what adjustments need to be made in order to get the last two values to line up correct, while preserving the first 4 values in the matrix. Any advice for solving this problem to shed some light on what is happening and what I need to do to adjust my tween would be greatly appreciated.

Thank you to Jack and Carl. I did play around with SVGOMG before I posted. But basically, I want to morph one SVG shape to another by saving them in separate files which could potentially lead to thousands of SVG files. So adding a step to resave the files to filter them into good form would be tedious. I have taken Jack's code and applied it in my own Javascript class that loads SVGs. You saved me writing the regex Jack so thank you very much for that! Thanks for the great libraries and great support. I am very happy with my purchase.

Hello, The following code pen example shows unwanted morphing behavior: http://codepen.io/anon/pen/YwJZBe I played around and realized that the underlying issue is caused by the value in the paths 1e-5 and 10e-6. The following changes: Change 1e-5 to 0 in path1 Change 10e-6 to 0 in path2 can be seen in this codepen example: http://codepen.io/anon/pen/bEmWOp And this is the expected behavior. I am using Inkscape to create the svgs. I played around with the precision and saving as an Inkscape SVG, Plain SVG and Optimized SVG, but I didn't have any luck getting rid of the precision whilst preserving the shapes. A quick Google search on how to handle numbers in that notation turned up this stackoverflow: http://stackoverflow.com/questions/10943997/how-to-convert-a-string-containing-scientific-notation-to-correct-javascript-num Would it be possible to have the MorphSVG plugin filter the numbers in that way? Could I get an unminified copy to make the adjustment myself? Or can anybody offer some other work around advice. Thanks!