title: CSS transform with SVG and anime.js
body: <p><strong>What I'm doing</strong></p>
  
  <p>I'm using <a href="http://animejs.com/" rel="nofollow noreferrer">anime.js</a> to animate some circles along paths in an svg. I create paths using Vue as I'd like the circle on the top to end up on the bottom, so it can't just be a static SVG.</p>
  
  <p><strong>What I expect</strong></p>
  
  <p>I expect the circles to start at one end of the svg path, and finish at the other end.</p>
  
  <p><a href="https://i.stack.imgur.com/kIdN0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kIdN0.png" alt="enter image description here"></a></p>
  
  <p><strong>What's actually happening</strong></p>
  
  <p>I have a demo here:
  <a href="https://codepen.io/EightArmsHQ/pen/paVxpd" rel="nofollow noreferrer">https://codepen.io/EightArmsHQ/pen/paVxpd</a></p>
  
  <p>When I click animate, the circles are jumping to a different position, then animating almost correctly, before finishing in the wrong place.</p>
  
  <p><a href="https://i.stack.imgur.com/ARyec.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ARyec.png" alt="enter image description here"></a></p>
  
  <p>This is the code I am using for anime.js:</p>
  
  <pre><code>for(var c = 0; c &lt; this.coins.length; c++){
    var path = anime.path('#path-'+ c);
    anime({
      targets: document.getElementById(this.coins[c].ref),
      translateX: path('x'),
      translateY: path('y'),
      rotate: path('angle'),
      duration: 1000,
      delay : this.coins.length * 100 - (100 * c),
      easing: 'easeInOutQuad',
      rotation: 0,
    });
    }
  </code></pre>
  
  <p>I know its almost definitely to do with <code>transform-origin</code> and the rotation transform that is applied to the circles, but I can't get my head around it.</p>