Lottieを再生するためのライブラリについて

５枚のスライドで紹介するページはこちら。

Web上でLottieアニメーションを再生するためのJavaScriptライブラリは、airbnbの公式ドキュメントによれば２つの種類が存在します。

Bodymovinを使った方法

Bodymovinライブラリを使ったコードは以下のようなものになります。

<div class="lottie"></div>
        
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.11.0/lottie.min.js"></script>
<script>
  bodymovin.loadAnimation({
    container: document.querySelector('.lottie'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '../images/lottie.json'
  });
</script>

Lottie-webを使った方法

<div class="lottie"></div>
        
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.11.0/lottie.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.querySelector('.lottie'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '../images/lottie.json'
  });
</script>

どちらでもLottieを再生できます

結論

Lottie-webは、Bodymovinの後継バージョンであり、Bodymovinの機能をすべて継承し、バグ修正やパフォーマンス向上が行われています。

基本的にはLottie-webライブラリを使った記述で問題ありません。