LottieFiles / lottie-player

Lottie viewer/player as an easy to use web component! https://lottiefiles.com/web-player
MIT License
1.55k stars 175 forks source link

Not able to listen to the 'complete' event #251

Open christina-wilfing opened 2 months ago

christina-wilfing commented 2 months ago

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();