Lottie.jsデモ

AFのアニメーションをjsonで書き出し、それを任意のdivに対してlottie.jsで描画しています。
divにcssで全画面に固定表示、背景色黒を指定しています。アニメーションのビュー範囲が1920*1080で作ってしまっているのでブラウザ幅を広げても縮尺は維持されます。
アニメーションが終了するとイベントを受け取って要素が消えるようjs制御しています。

npmでモジュール追加

npm install lottie-web

JS記述

import lottie from 'lottie-web'

const animation = () => {
  const targetDom = document.getElementById('lottie')
  if (!targetDom) return
  // アニメーションをロード
  const anim = lottie.loadAnimation({
    container: targetDom,
    // アニメーションをsvg形式で出力
    renderer: 'svg',
    // アニメーションをループする
    loop: false,
    // アニメーションを読み込んだら自動で再生する
    autoplay: true,
    // アニメーションファイル(.json)のパス
    path: '../assets/json/12_lottie01.json',
  })
  // アニメーションが完了したら要素削除
  anim.addEventListener('complete', () => {
    console.log('completed')
    targetDom.remove()
  })
}
animation()