begin() and complete() with loop: true on timelines are only called once

[manake]

begin() and complete() callbacks of timeline parts only get called once in the loop: true; mode, which is not correct.

let timeline = anime.timeline({
	loop: true,
	easing: 'linear',
});

timeline.add({
	duration: 500,
	complete: function(anim){
		// Only called once, not called on further loops.
	},
});

[juliangarnier]

It will be fixed in v4!

[ambienthack]

try this workaround:

let timeline = anime.timeline({
        //...
        loop: true,
        loopComplete: () => {
            timeline.restart();
        }
       //...
});

[VTY1999]

If you want to have a callback that runs only once at the end of the entire timeline (not on each loop), you can use the begin() callback for the timeline itself. Here's an example code:

let timeline = anime.timeline({
  loop: true,
  easing: 'linear',
  complete: function(anim) {
    // This callback will be called at the end of the entire timeline.
    console.log("Timeline complete");
  },
});

timeline.add({
  duration: 500,
  /* Your animation properties here */
});