lottie animation on complete fade out

Question

I have a lottie animation playing one time. When it completes playing I want to fade it out.

What is the best way to do it?

I am trying to fade in and out SVG lottie animations.

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

var anim;
anim = lottie.loadAnimation(params);
 anim.addEventListener('DOMLoaded',function() {
        anim.play();
});

anim.addEventListener('complete',function() {
        //anim.destroy();
        // fade out code...
});

score 0 · Answer 1 · edited Mar 26 '20 at 08:13

0

Try this code to fade out element on complete animation

    anim.onComplete = function (e) {
        // fade out code...
    }

Here's a codepen example:

https://codepen.io/jaredstanley/pen/NmQYQY

edited Mar 26 '20 at 08:13

jared

652
9
19

answered Jan 21 '20 at 13:40

Vkuter

247
1
7

score 0 · Answer 2 · answered Mar 25 '20 at 22:37

0

anim.onComplete = function(){
  //
}

Here's a codepen with a working example(scroll down to the btm of the js panel) https://codepen.io/jaredstanley/pen/NmQYQY

answered Mar 25 '20 at 22:37

jared

652
9
19

lottie animation on complete fade out

2 Answers2