SVG Rotate an element during svgjs animation

Question

I am using Javascript, jQuery, SVG and SVG.js right now. I would like to turn a circle around its origin while it animates. The animation does the same, so I can use some kind of step function, but I could not find anything. The problem is that with my current solution is janky animation, it has to stop the animation, rotate the circle and start it again. Which in the sequence has too much delay and causes a movement of movement. Here's the installation code:

var draw = SVG('svg'); var innerCircle = draw.group().addClass("atom0g0").move(100,100); innerCircle.circle(100).addClass("atom0p0").center(0, 0).attr({ fill: "white", stroke: "blue", "stroke-dasharray": "10" }); innerCircle.animate(6000).rotate(360, 0, 0).loop(); 

And the executable code right now that I need to change to something is here:

 var elms = $(".atom"+atom.atom_id.toString()+"g0"); for (var j=0; j < elms.length; j++) { // this is the problem, too much of a delay, therefore causing a wiggle motion. elms[j].instance.animate().stop(); elms[j].instance.rotate(step, 0, 0); elms[j].instance.animate(6000).rotate(360, 0, 0).loop(); } 

Here's the CodePen I'm working on right now: Current Version or Bugged Version

In short (if you just skipped to the end here) I need to rotate the circle without stopping the animation of the circle completely. I know that play() , pause() does not work, because I cannot call rotate() while the animation is paused.

Answer 1

Accepted answer:

Try to wrap your element with another element and animate it separately.

---

One solution is to change this line:

 elms[j].instance.rotate(Math.random()*360, 0, 0); 

in it:

 elms[j].instance.animate(1000).rotate(Math.random()*360, 0, 0); 

This rotation method will be animated.

Codepen: https://codepen.io/soentio/pen/POVLYV

---

Other possible solutions i use css for your transitions. By adding the following line:

 #svg > g { transition: transform 1s ease-in-out; } 

You will be convinced that whenever the group (direct children of your svg node root) rotates, it will be animated smoothly.

CodePen: https://codepen.io/soentio/pen/gXqqNQ

The advantage of this approach is that regardless of your rotation, the browser selects the shortest path.

---

Bonus: I believe in the superiority of css animation (;-)) and inspired by your code, made you a small script: https://codepen.io/soentio/pen/YEBgyj Perhaps your goals should be achieved only with css?