Lottieで作成されたアニメーションをサイトに追加する

Lottieで作成したアニメーションをサイトに組み込む機会があったので、実装方法をメモ。

設定方法

今回はアニメーション自体の作成ではなく、アニメーションをサイトに組み込む方法になるので、LottieFilesで公開されているアニメーションを使用してみます。
アカウント登録後に使用したいアニメーションを選択して、右上のDownload > Lottie JSON をクリックします。

アニメーションをサイトに組み込むためのプラグインを用意します。
インストール方法はいくつかありますが、今回はCDNを使用します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.9/lottie.min.js"></script>

アニメーションを組み込む要素を用意します。

<div id="sample"></div>

最後にJavaScriptの設定を行います。

lottie.loadAnimation({
  container: document.getElementById('sample'), // アニメーションを追加する要素
  renderer: 'svg', // レンダリングのタイプ
  loop: true, // アニメーションをループさせるかどうか
  autoplay: true, // アニメーションを自動再生するかどうか
  path: 'data.json' // アニメーションのjsonファイルのパス
});

これでLottieで作成したアニメーションをページに組み込むことができました。
Lottie組み込みのデモページ