how can i replace ngx-lottie path to different one on the fly without creating a new element for that?

Question

I Am using ngx-lottie, and I am struggling to get to change the path (to the animation file)

this.lottieConfig = {
        path: 'assets/standBy.json',
        renderer: 'canvas',
        autoplay: true,
        loop: true
    };

How can I change the animation base on notifications from WebSocket I connected to without creating a new Lottie ? and without the animation jump while replacing? for example, I get notification of 'ready' i would like to replace the path of Lottie to 'assets/ready.json' 'if I just changing the path prop its not working.

score 1 · Answer 1 · answered Dec 29 '20 at 15:44

This is outlined in their docs. Set the new file in your websocket event handler like this:

    this.lottieConfig= {
      ...this.lotteConfig, // In case you have other properties that you want to copy
      path: '/assets/new-animation.json',
    };

I'm not sure what you mean with animation jump but if you want the animation to finish first before replacing you could listen on the loopComplete event and wait for it to trigger.

how can i replace ngx-lottie path to different one on the fly without creating a new element for that?

1 Answers1