How do you pause a looped animation in SVG.js?

Question

I’ve got a looped animation that looks like this:

foreground.animate(1000, '>').stroke({ opacity: 0, width: 34 }).loop();

I want to incorporate a delay of 800ms into each loop. Specifically before each time the stroke animates to { opacity: 0, width: 34 }. I’ve tried adding a delay in the animation:

foreground.animate(1000, '>', 800).stroke({ opacity: 0, width: 34 }).loop();

… but that just delays the first loop. Then I tried adding delay():

foreground.animate(1000, '>').stroke({ opacity: 0, width: 34 }).delay(800).loop();

… but that, too, only adds the delay once.

Is it possible to have each loop include an 800ms delay at the beginning of each loop?

I've figured out solutions for other SVG.js animations using `setInterval` and also, like [this example](https://github.com/svgdotjs/svg.js/issues/498), using `.after()` for recursion. But when I apply the solution to your animation, one that animates stroke, it only fires once. So I'm thinking it has to do specifically with animating attributes. — tgiachetti, Jun 06 '18 at 23:40

score 1 · Accepted Answer · answered Jun 07 '18 at 06:06

If I understand correctly, one way you could achieve this is by placing the animation related code in a function, and calling that function on the end of each animation:

function cycle() {
  this.stroke({width: 0, opacity: 1}) 
      .animate(1000, '>', 800)
      .stroke({opacity:0, width: 34})
      .after(cycle);
}

Then we can use cycle.apply(foreground) to get this to be the element(s) being transformed and the animation started:

var draw = SVG('content').size(500, 300)
var circle = draw.circle(100).attr({ fill: 'steelblue' }).move(200,20)

cycle.apply(circle);

function cycle() {
  this.stroke({width: 0, opacity: 1})
      .animate(1000, '>', 800)
      .stroke({opacity:0, width: 34})
      .after(cycle);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>

<div id="content"></div>

For svg.js v2 this is the correct solution. In v3 there will be easier ways to achieve that — Fuzzyma, Jun 07 '18 at 16:55

How do you pause a looped animation in SVG.js?

1 Answers1