CODEWITHSUNDEEP
javascriptanimationsvgsnap.svg
WIWIWWIISpitFire
WIWIWWIISpitFire

Reputation: 1549

SVG path animation from center point

I'm trying to animate an SVG that has 3 stages: initial, hover and click. I want to animate all stages from one line. I'm using Snap SVG to get it working.

You can view the working codepen at http://codepen.io/anon/pen/BjEeZR Please click the red cirkel in the pen

As you see, the path is animated from the top-left corner of the viewbox. The 'click' stage is bigger then the other two stages. So when the click is triggerd, the path is animated downwards.

How can I animate between my path's so that the animation is triggerd from the center point of the viewbox?

Thanks in advance!

html:

<a href="#" id="chooseLang" class="hotCornersBtn">
     <svg></svg>
</a>

jquery:

//SVG-snap
    var none = "none"
        sausRed = "#ff1a29"
        strokeWidth = 3

        chooseLang = Snap("#chooseLang svg");

        initLangSvg = "M21.5,11.5c0,2.8-1.1,5.3-2.9,7.1c-1.8,1.8-4.3,2.9-7.1,2.9c-2.8,0-5.3-1.1-7.1-2.9c-1.8-1.8-2.9-4.3-2.9-7.1c0-2.8,1.1-5.3,2.9-7.1c1.8-1.8,4.3-2.9,7.1-2.9c2.8,0,5.3,1.1,7.1,2.9C20.4,6.2,21.5,8.7,21.5,11.5z"
        hoverLangSvg = "M21.5,13.5c0,2.8-2.1,3.8-4.6,5c-4.7,2.3-3.7,5.7-6.3,7s-8.4,0.8-9.1-3.9c-0.6-4.1,1.1-5.3,1.1-8.1c0-2.8-2.5-4.9-0.1-8.1c1.8-2.3,3.6-3.9,9.1-3.9c5.2,0,4.1,4.2,7,6C20.9,8.8,21.5,10.7,21.5,13.5z"
        clickLangSvg = "M33.1,18.2c1.1,3.9-4.3,8.6-10.6,9.3c-5.4,0.6-1.8,6.9-7.1,8.9c-6.7,2.6-9-0.7-8.5-6c0.5-4.6-9.6-6-3.5-12C6.7,15.3,0.6,10.1,4.9,7c4-2.9,4,7.6,13-4.1c2.7-3.5,11.4-0.1,7.4,8.2C22.4,17.2,31.2,11.6,33.1,18.2z"

        boundingBox = chooseLang.rect(0, 0, 40, 40).attr({fill: none, stroke: none, strokeWidth: none});

        outerCircle = chooseLang.path(initLangSvg).attr({viewBox:"0,0,40,40", preserveAspectRatio:"xMidYMin", fill: none, stroke: sausRed, strokeWidth: strokeWidth});

        boundingBoxGroup = chooseLang.group(outerCircle, boundingBox); 


    function chooseLangInit() {
        outerCircle.animate({d:initLangSvg}, 400);
    }

    function chooseLangHover() {
        outerCircle.animate({d:hoverLangSvg}, 400);
    } 

    function chooseLangClick() {
        outerCircle.animate({d:clickLangSvg}, 400);
    } 


////
$('document').ready(function() {


    //  
    $( "#chooseLang" ).hover(
      function() {
         chooseLangHover(); 
      }, function() {
         chooseLangInit();

      }
    ).click(function() {
        chooseLangClick();
    });



});

Upvotes: 2

Views: 570

Answers (1)

Sphinxxx
Sphinxxx

Reputation: 13017

Here is how you can move the two first paths closer to the center before you animate them, using @Ian's Snap.path.map() method:

var matrix = new Snap.Matrix();
initLangSvg  = Snap.path.map(initLangSvg, matrix.translate(4,7));
hoverLangSvg = Snap.path.map(hoverLangSvg, matrix.translate(1,-1));

Updated pen: http://codepen.io/Sphinxxxx/pen/EPzmgO

Upvotes: 2

Related Questions