Snap.svg Animation

Question

I am trying to create an animation out of my vase.svg and plant.svg file using snap.svg JS Library.

Check out their site: http://snapsvg.io/

http://snapsvg.io/demos/

So basically what I want to do is to create a simple animation that when I hovered my mouse on the vase.svg the plant.svg will have a smooth growing effect, like its popping out from the vase.svg file.

So far here's what I have in my code:

<!----VASE SVG -->

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="169.403px" height="122.866px" viewBox="0 0 169.403 122.866" style="enable-background:new 0 0 169.403 122.866;"
         xml:space="preserve">
    <style type="text/css">
        .st0{fill:#8C6239;}
        .st1{display:none;}
        .st2{fill:#A67C52;}
    </style>

    <g id="vase">
        <polygon class="st2" points="4.568,11.263 42.754,111.803 131.694,111.803 165.53,11.263  "/>
        <rect x="4.568" y="11.263" class="st0" width="160.961" height="13.051"/>
    </g>
    </svg>



<!--- PLANT SVG -->

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="89.75px"
     height="91.25px" viewBox="0 0 89.75 91.25" style="enable-background:new 0 0 89.75 91.25;" xml:space="preserve">
<style type="text/css">

    .st0{fill:#F7931E;}
    .st1{fill:#FCEE21;}
    .st2{fill:#352A24;}
    .st3{display:none;}

</style>
<g id="Layer_1" class="st3">
</g>
<g id="branch">
    <path class="st2" d="M74.292,2.688c0,0,5.277,31.238-44.031,55.489c-17.396,8.554-19.565,21.354-18.091,30.986h6.902
        c-1.695-8.763-0.34-19.908,13.699-26.744C58.637,49.827,79.567,22.939,74.292,2.688z"/>
</g>
<g id="leaves">
    <path class="st0" d="M52.671,51.978c0,0,9.323,6.733,18.417,0.235c9.098-6.494,11.716-3.966,11.716-3.966
        s-18.476-12.426-31.92,2.424L52.671,51.978z"/>
    <path class="st1" d="M54.686,51.262c0,0,9.139-8.96,21.293-4.055"/>
    <path class="st0" d="M62.42,32.905c0,0,0.232-9.613-8.555-12.811c-8.784-3.197-8.28-6.201-8.28-6.201s0.177,18.62,16.778,20.862
        L62.42,32.905z"/>
    <path class="st1" d="M62.057,34.243c0,0-12.282-3.59-13.95-16.586"/>
</g>
</svg>

Check out the jSFiddle: http://jsfiddle.net/axh9pwet/1/

NOTE: snap.svg-min.js is an external resource that was included.

Answer 1

For this, I don't think you need any library.

You also have conflicting CSS class selectors. Fixed using the image.

http://jsfiddle.net/axh9pwet/3/

window.onload = function () {
    var pot = document.getElementById("pot");
    pot.addEventListener("mouseenter", growPlant);
    pot.addEventListener("mouseleave", resetPlant);

    var plant = document.getElementById("plant");
    var plantPos = 100;

    var timer = null;

    function growPlant(e) {
        clearInterval(timer);
        timer = setInterval(function () {
            if (parseInt(plant.style.top) < 25) {
                clearInterval(timer);
            } else {
                plant.style.top = (--plantPos) + "px";
            }
        }, 1000 / 60);
    }

    function resetPlant(e) {
        clearInterval(timer);
        timer = setInterval(function () {
            if (parseInt(plant.style.top) > 100) {
                clearInterval(timer);
            } else {
                plant.style.top = (++plantPos) + "px";
            }
        }, 1000 / 60);
    }
};

body {
  background: #e4e4e4;
}
svg {
  position: absolute;
  top: 100px;
}
#plant {
  left: 50px;
}
#pot .st0 {
  fill: #8C6239;
}
#pot .st2 {
  fill: #A67C52;
}
#plant .st0 {
  fill: #F7931E;
}
#plant .st1 {
  fill: #FCEE21;
}
#plant .st2 {
  fill: #352A24;
}
#plant .st3 {
  display: none;
}

<svg width="90" height="90" id="plant">
  <g id="Layer_1" class="st3"></g>
  <g id="branch">
    <path class="st2" d="M74.292,2.688c0,0,5.277,31.238-44.031,55.489c-17.396,8.554-19.565,21.354-18.091,30.986h6.902
    		c-1.695-8.763-0.34-19.908,13.699-26.744C58.637,49.827,79.567,22.939,74.292,2.688z" />
  </g>
  <g id="leaves">
    <path class="st0" d="M52.671,51.978c0,0,9.323,6.733,18.417,0.235c9.098-6.494,11.716-3.966,11.716-3.966
    		s-18.476-12.426-31.92,2.424L52.671,51.978z" />
    <path class="st1" d="M54.686,51.262c0,0,9.139-8.96,21.293-4.055" />
    <path class="st0" d="M62.42,32.905c0,0,0.232-9.613-8.555-12.811c-8.784-3.197-8.28-6.201-8.28-6.201s0.177,18.62,16.778,20.862
    		L62.42,32.905z" />
    <path class="st1" d="M62.057,34.243c0,0-12.282-3.59-13.95-16.586" />
  </g>
</svg>
<svg width="169" height="123" id="pot">
  <g id="vase">
    <polygon class="st2" points="4.568,11.263 42.754,111.803 131.694,111.803 165.53,11.263 	" />
    <rect x="4.568" y="11.263" class="st0" width="160.961" height="13.051" />
  </g>
</svg>