#(1)アニメーションをafterで作成
まずは素材作り。
で、ウィンドウ＞拡張機能＞bodymovin。

#(2)エラーが出るよー😂→環境設定でした😅
allow scripts to write files and access network
と出てしまう。エラーもかわいいわい！

なんのことはない！
スクリプトによるファイルへの書き込み〜にチェックが必要だったようです。

左の丸にチェックが入っておりかつ保存先を指定しないと
同様のウサギが出てきて注意されます。

で、data.jsonが吐き出されます。

#(3)lottieサイトで動作チェック

下記にdata.jsonをドラッグ・アンド・ドロップ。🍬
https://lottiefiles.com/preview

#(4)実装


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Lottie</title>
</head>

<body>
<h1>テストですわ</h1>
<div id="lottie"></div>
</body>
    
<script src="js/lottie.js" type="text/javascript"></script>
<script>lottie.loadAnimation({
  container: document.getElementById('lottie'), // アニメーションをさせたいdivなどhtml要素ににつけた名前
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // 自分が書き出したjsonファイルの名前と場所（パス）を記述
});</script>
    
</html>

▼参考記事
https://note.mu/swcd/n/nb7bdb48e80ca#pJ64a

動かないよー！！😂の原因は
Uncaught TypeError: Cannot read property 'appendChild' of nullでした。

<div id="lottie"></div>

の前に

container: document.getElementById('lottie')

を書いちゃうと、lottieなんかないっすよー？
ってことで表示されなかったのですね。

▼参考記事(ありがとうございます。)
http://blog.netandfield.com/shar/2015/04/avascript.html

#(5)作成の際に気をつけること
うまく変換されない例
❌パーティクルなどのエフェクトを使用したアニメーション
❌画像を使用したアニメーション
❌イラストレーターaiデータのままのアニメーション
　👉シェイプ化しないと駄目みたい、、涙