I would like to play several LottiePlayers in the same container one after the other.
It is possible to listen if the player is ready and set the first element to play().
However, listening to whether the animation is finished to start the next one doesn't work. (neither 'complete' nor 'loop')
Where is my error?
(My project is older and therefore still uses jquery ...)
let player;
let lottieArea = $('.js-lottie-area');
let lottiePlayers = lottieArea.find('.js-lottie-delay');
let current = 0;
function playNextLottie() {
if (current >= lottiePlayers.length) {
return;
}
player = lottiePlayers[current];
$(player).on('ready', function () {
create({
// mode: 'scroll',
player: player,
container: lottieArea
})
player.play();
});
$(player).on('complete', function () {
current++;
playNextLottie();
});
$(player).on('loop', function () {
current++;
playNextLottie();
});
}
playNextLottie();
I would like to play several LottiePlayers in the same container one after the other. It is possible to listen if the player is ready and set the first element to play(). However, listening to whether the animation is finished to start the next one doesn't work. (neither 'complete' nor 'loop')
Where is my error?
(My project is older and therefore still uses jquery ...)