Search code examples
jquerysvgsnap.svg

Rotation Animation with SVG

I'm a beginner with svg and I have an svg that I'm trying to animate the rotation to -45 degrees. I'm using Snap.js to handle the animation. The animation is not behaving like I'm expecting it to and I'm not sure how to fix it. The animation finishes in the correct position but when it rotates, it seems to be shifting to the right and then shifting back to the left as it rotates to the end position.

Sorry if that explanation is confusing, I've provided links to some JS fiddles I've made so anyone who is helping can compare the two. The CSS fiddle is to simply demonstrate the motion i'm looking to do with Snap: a smooth rotation to the new position without shifting right then left. Below is the code I've used:

<svg height="200" width="500" id="semaphore">
  <g transform="rotate(-45,200,100)">
     <circle id="light" cx="200" cy="130" r="10" fill="red"></circle>
  </g>
  <g id="signal" >
  <path d="M200 142
     L320 142
     L320 125
     L250 127
     Q235 125, 233 116
     T218 108
     Q211 110,206 114
     Q198 118, 189 111
     Q178 105, 169 111
     Q155 135, 200 142" fill="none" stroke="black"></path>
  <path d="M176 108
     L176 106
     Q188 106, 187 100
     A1 1 0 0 1 213 100
     Q212 106,224 106
     L224 108" fill="none" stroke="black"></path>
  <circle cx="200" cy="100" r="8" fill="none" stroke="black"></circle>
  <line x1="200" y1="92" x2="200" y2="108" stroke="black"></line>
  <line x1="192" y1="100" x2="208" y2="100" stroke="black"></line>
  <g transform="rotate(-45,200,100)">
    <circle cx="200" cy="130" r="10" fill="none" stroke="black"></circle>
  </g>
  <g>
    <circle cx="200" cy="130" r="10" fill="none" stroke="black"></circle>
  </g>
  <g transform="rotate(45,200,100)">
    <circle cx="200" cy="130" r="10" fill="none" stroke="black"></circle>
  </g>
 </g>
</svg>
<input type="button" value="Click" id="testButton">

//JQuery-Snap.js
$(document).ready(function(){
  $("#testButton").on("click", function(){
    clickMe();
  });
});

function clickMe(){
   var signal = Snap("#semaphore");
   signal.select("#light").attr({fill:"yellow"});
   signal.select("#signal").animate({transform:"r- 45,200,100"},3000,mina.linear);
}

//CSS For Other Rotation Animation
#semaphore{
  transform-origin:200px 100px;
  -webkit-animation-name: approach; 
  -webkit-animation-duration: 3s; 
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: approach; 
  -moz-animation-duration: 3s; 
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: linear;
  animation-name: approach; 
  animation-duration: 3s; 
  animation-iteration-count: 1;
  animation-timing-function: linear;
 }

 @keyframes approach{
   0% {transform:rotate(0deg);}
   100%{transform:rotate(-45deg);}
 }

JS Fiddle Using Snap

JS Fiddle Using CSS

Let me know if you need any more information. Thank you in advance for your help, Shaun

Solution

  • It's because there is a bug in that version of Snap that I think has been fixed (may need to check the dev branch if not, or go back to 0.4.1)

    As an example with a different Snap version..loaded from below

    jsfiddle

    https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js