Lottie animation reverse on loop

Question

I'm trying to reverse the animation on loopComplete - it works but only once. How can I make it loop forever?

Here's my code:

var params = {
            container: document.getElementById('loader'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            animationData: animationData
        };
    
        var anim;
        anim = lottie.loadAnimation(params);

        anim.addEventListener('loopComplete', function() {
          anim.setDirection(-1);
          anim.play();
        })

        anim.addEventListener('complete', function() {
          anim.setDirection(1);
          anim.play();
        })

Answer 1

You can use setInterval function for looping through Lottie.

Make loop: false and change the setInterval time according to your Animation.

var params = {
        container: document.getElementById('loader'),
        renderer: 'svg',
        loop: false,
        autoplay: true,
        animationData: animationData
    };

    var anim;
    anim = lottie.loadAnimation(params);
    
     let dir = 1;
     setInterval(function () {
        if(dir == 1) {dir = '-1'} else {dir = '1'; }
        anim.setDirection(dir);
        anim.play();
    }, 2500);