CSS transform with SVG and anime.js

Question

What I'm doing

I'm using anime.js 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.

What I expect

I expect the circles to start at one end of the svg path, and finish at the other end.

What's actually happening

I have a demo here: https://codepen.io/EightArmsHQ/pen/paVxpd

When I click animate, the circles are jumping to a different position, then animating almost correctly, before finishing in the wrong place.

This is the code I am using for anime.js:

for(var c = 0; c < 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,
  });
  }

I know its almost definitely to do with transform-origin and the rotation transform that is applied to the circles, but I can't get my head around it.

score 1 · Answer 1 · answered Feb 23 '18 at 11:01

I found after some experimenting the issue was that I was altering the transformX and transformY properties, which, while it sort of worked and would work better for DOM elements, I should have been using cx and cy attributes. I also removed the rotation as well.

for(var c = 0; c < this.coins.length; c++){
  var path = anime.path('#path-'+ c);
  anime({
    targets: document.getElementById(this.coins[c].ref),
    cx: path('x'),
    cy: path('y'),
    duration: 1000,
    delay : this.coins.length * 100 - (100 * c),
    easing: 'easeInOutQuad',
    rotation: 0,
  });
  }

Here is a demo:

https://codepen.io/EightArmsHQ/pen/aqKXrQ?editors=1010

CSS transform with SVG and anime.js

1 Answers1