Trouble rotating a path

[Chris Grimmett]

I'm having trouble rotating a path. What I'm trying to do is create a cassette tape with animated spinners. (Spinner is probably the wrong terminology lol.)

I can get the spinner to spin, but it doesn't spin in place like I want it to. It moves off to the lower left in addition to rotating.

I've made a codepen to illustrate the issue. What am I doing wrong?

https://codepen.io/insanity54/pen/abvXdLR

[Alain DELANAY]

Hi,
I was surprised to see what happen with your code, because obj.attr({ transform: 'r45' }) is working (you even don't need to specify the center, it's correct by default), so I don't know why it would not work with the animate function.
I checked that it's not only for path: if you have a simple rectangle, we observe the same strange behaviour.

Unfortunately, I am not able to study for any bug in the snapsvg library, moreover to fix any.

However I tried successfully a basic javascript animation:

  let cassetteTape = Snap('#cassette-tape');
  let leftSpinner = cassetteTape.select('#left-spinner');
  let animation
  let anim_deg

  let spinning = (obj, deg) => {
     if (anim_deg < deg) {
        anim_deg ++
        obj.attr({ transform: 'r' + (anim_deg % 360) });
     }
     else {
        //break as soon as the target angle is reached
        anim_deg = 0
        obj.attr({ transform: '' });
        clearInterval(animation)
     }
     return;
  }
 
  let spin = () => {
     anim_deg = 0
     animation = window.setInterval( function() { spinning(leftSpinner , 410); } , 5);
  }

You'll notice that I changed the initial element selection too, because it wasn't working for me and I didn't find Snap.select in the snapsvg documentation. I think my proposal is more classical.

I hope it helps. Have a nice day.

Regards,
Alain