Lottieを表示してみよう

Lottie-webライブラリで、Lottieを表示する最小限のコード

<div class="lottie"></div> <!-- Lottieの入れ物となる要素を配置する（空でOK） -->

<!-- Lottie-webライブラリの読み込み -->
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>

<script>
  lottie.loadAnimation({
    container: document.querySelector('.lottie'), /* Lottieの入れ物要素を指定する */
    renderer: 'svg', /* SVGとして描画する */
    loop: true, /* アニメーションを繰り返すかどうか（true: 繰り返す、false: 一度だけ、整数: 繰り返し回数-1） */
    autoplay: true, /* 自動的にアニメーションを再生するかどうか（true: 再生する、false: 再生しない） */
    path: './animation.json' /* LottieのJSONファイルのパスを指定する  */
  });
</script>