svg morphing without flipping

I have been trying to find a simple and free way to make a morph between a bezier shape and its mirrored copy. Because they have the same number of points, I thought it will be an easy task. It wasn't. I tried KUTE and SVG morpheus. Kute was performing an unneeded vertical flip, and Morpheus an unnecessary horizontal one (codepen here). The only javascript library that did the trick was the paid MorphSVG plugin. (codepen here) It's a pity and I hope i can find a cheaper solution in the future. If anyone knows anything, please let me know.

 var svgMorpheus = new SVGMorpheus('#icon', {rotation: "none"});
 var icons = ['question', 'answer'];
 var current = 0;

Solution

A quick hack based on my old animation: http://jsfiddle.net/alkhoo/JwkYm/11/ - mouse over to activate animation.

Note: The greensock animation contains the paths value.

 $(function () {

     //Grab an array of all the main SVG Elements
     var containers = $(".category .item a");

     //Define some vars that we will use later
     var speed = 1000;
     var animation = mina.backout;

     //Loop through all of these containers and insert the SVG's
     containers.each(function (index) {

         //Get each of our SVG tags
         var s = Snap(".animated-overlay.svg-" + index);

         //Define our Paths

         var defaultWhitePath = "M1.8978756799999998,64.59785067199999 C4.5919579200000005,94.29202528 74.7848272,99.01918832 128.25879712,95.43520928 361.0060832,78.08572735999999 468.2360832,8.157339040000004 562.54879712,6.478409280000005 646.3748272,4.004430240000005 663.93195792,95.19048896 664.08987568,93.45505007999999 664.24724128,114.2054704 664.1263182399999,144.17150224 664.1263182399999,166.67625712 443.1668704,166.67625712 222.2168704,166.67625712 1.26631824,166.67625712 1.26631824,165.36156416 -0.8027587199999999,36.217596 1.8898756799999998,64.59746416 z";

         //Define our Hover Paths
         var hoverWhitePath = "M0.6989956799999999,94.82189867199999 C0.6932379199999996,94.83954528000001 15.029627200000007,-2.205931680000006 100.71287712,0.6387292800000068 186.5548832,3.4719673599999936 293.78488319999997,81.96869904 535.00287712,100.48192928 586.6196272000001,104.43659024 660.0332379199999,93.83112896 662.89099568,62.42577008 665.7387612800001,31.0390704 663.55047824,166.25166224 663.55047824,166.27033712000002 442.6004704,166.27033712000002 221.65047040000002,166.27033712000002 0.6904782399999999,166.27033712000002 0.6904782399999999,142.47900416000002 0.6887612800000001,118.58159599999999 0.6909956799999999,94.81490416 z";

         //Load up the default paths in the SVG
         var whitePath = s.path(defaultWhitePath);

         whitePath.attr({
             fill: "#00f"
         });

         //Let's group our paths, it doesn't seem like you can animate the whole group though :(
         var paths = s.group(whitePath);

         //Animate on Mouse Enter
         $(containers[index]).mouseenter(function () {
             whitePath.animate({
                 path: hoverWhitePath
             }, speed, animation);
         });

         //Animate on Mouse Leave, return the paths to the default
         $(containers[index]).mouseleave(function () {
             whitePath.animate({
                 path: defaultWhitePath
             }, speed, animation);
         });



     });

 });

body {
    background: #ddd;
}
.item {
    max-height: 300px;
    background: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="category">
    <div class="item" style="background-image: url('images/category.jpg');"> <a href="#" title="Category Title">
           
           <svg viewbox="0, 0, 700, 300" preserveAspectRatio="none" class="animated-overlay svg-0">
               
           </svg>
    
        </a>

    </div>
</div>