CODEWITHSUNDEEP
animationsvgsvg.js
Brandon Durham
Brandon Durham

Reputation: 7727

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

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?

Upvotes: 2

Views: 297

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38201

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>

Upvotes: 1

Related Questions