[Vuejs]-Lottie-player loading JSON object/string into src attribute doesn't work

by

0👍

Your problem might be that initial src is null and on the next render src is your json. lottie-player will not re-render if src gets changed – Git issue.

JSON objects work as src attribute but you need to use JSON.stringify(json).

You can listen for src change and load the player again, with new src. Here is the example in React but it causes blink effect, which is not really nice.

useEffect(() => {
    if (!prevSrc || prevSrc === src) {
      return;
    }

    const lottiePlayer = document.getElementById(`lottie-player-${src}`);

    if (lottiePlayer) {
      lottiePlayer.load(src);
    }
}, [src, prevSrc]);

Leave a comment