SVG.js get function to run after animation timeline has completed running and then reverse the animation to original state

Question

With the this code i create a timeline and bind it to a svg element and want a function to run after the timeline is completed and then reverse back to initial state. As documentation use ...

var timeline = new SVG.Timeline().persist(true);                
var draw = SVG().addTo('#drawing').size(800, 800);
var rect = draw.rect(50, 50).attr({fill: '#f06', id :'rect'});
var runner = rect.animate();
runner.animate(9900,100,'absolute').rotate(40).animate(9900,100,'absolute').translate(200,200).animate(9900,100,'absolute').scale(0.6).animate(9900,100,'absolute').attr({fill:'#ccccff'}).animate(9900,100,'absolute').attr({stroke:'#6666ff'}).after(function() {doOnFinish(rect)});

function doOnFinish(obj){
console.log('RUN ONCE FINISHED ***********************');
console.log('obj : ' + obj);
for(var i in obj){
    console.log(i);
}
runner.reverse();
}

The function does execute after the runner completes but the reverse does not work. Is there another way of doing this?

The jsfiddle is at : js fiddle link

Answer 1

try this one

var timeline = new SVG.Timeline();
var draw = SVG().addTo('#drawing').size(800, 800);
var rect = draw.rect(50, 50).attr({ fill: '#f06', id: 'rect' });
let runner = rect.animate();

var originalAttrs = {
  rotate: 0,
  translate: { x: 0, y: 0 },
  scale: 1,
  fill: '#f06',
  stroke: 'none',
};

runner
  .animate(9900, 100, 'absolute').rotate(40)
  .animate(9900, 100, 'absolute').translate(200, 200)
  .animate(9900, 100, 'absolute').scale(0.6)
  .animate(9900, 100, 'absolute').attr({ fill: '#ccccff' })
  .animate(9900, 100, 'absolute').attr({ stroke: '#6666ff' })
  .after(function () {
    doOnFinish(rect);
  });

function doOnFinish(obj) {
  console.log('RUN ONCE FINISHED ***********************');
  console.log('obj : ' + obj);
  for (var i in obj) {
    console.log(i);
  }
  rect.animate(9900, 100, 'absolute').transform({
    rotate: -originalAttrs.rotate,
    translate: { x: -originalAttrs.translate.x, y: -originalAttrs.translate.y },
    scale: 1 / originalAttrs.scale,
  });
}