[Lottie, Html, Javascript] Lottieファイルのアニメーションがうまく表示されない

#はじめに
下記のサイトを参考にLottieでjsonファイルとして書き出されたアニメーションを表示させたく思っています
Lottieで作ったアニメーションをWebサイトで実装（レスポンシブ対応）

#問題
サイトを元に、下記のようなディレクトリとファイルを作成しましたが、うまくアニメーションが表示されません。

ファイルは以下のように実装しています

data.json : https://lottiefiles.com/ よりインストールしたjsonファイル
index.js : アニメーションを実行するためのファイルで下記の通り

var animationTivel = lottie.loadAnimation({
  container: document.getElementById('lottie'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
});

lottie.js, lottie.min.js : https://github.com/airbnb/lottie-web からダウンロード
test.html : 下記の通り

<!DOCTYPE html>
<html lang="en">
<head>
  
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Bodymovin Demo</title>
  
  <!--  Styles  -->
  <!-- <script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script> -->
  <script type="text/javascript" src="lottie.js"></script>
  <script type="text/javascript" src="lottie.min.js"></script>
</head>
<body>
  
  <div id="lottie" style="height: 300px; width: 300px; background: red;"></div>
  <!-- Scripts -->
  <!-- <script src="lottie.js"></script> -->
  <script src="index.js"></script>
</body>
</html>

どなたかアドバイスいただける方おりましたらよろしくお願いいたします。m(_ _)m

行動規範の内容に同意します

回答2件

jQueryが読み込まれてないからじゃないでしょうか？
参考サイトのデモページのソースではjQueryを読み込んでます。
http://demo.tivel.jp/n/lottie/

投稿2019/04/23 04:42

kenk1024

総合スコア29

自己解決

こちら解決しました。
Github lottieのDemoディレクトリをローカルで試し、実際にアニメーションの表示を確認できたので、こちらのコードを参考にしました。

上記で変えた点は、
data.jsonファイルを
data.jsで定義し、下記の内容に変えました。

var animData = {"v":,"nm":"组 1","np":2,"mn":"ADBE Vector ............................Group"}],"ip":0,"op":750,"st":0,"bm":0,"sr":1}]};

index.htmlのheadタグで、data.jsを読み込み、index.html自体も以下の内容に変更しました(一部抜粋)

<div style="width:300px;height:300px;background-color:white;" id="bodymovin"></div>

<script>
    var animParams = {
        wrapper: document.getElementById('bodymovin'),
        animType: 'html',
        loop: true,
        prerender: false,
        autoplay: true,
        animationData: animData
    };
    bodymovin.setQuality(500);
    var anim = bodymovin.loadAnimation(animParams);
    window.onresize = anim.resize.bind(anim);
</script>

実際に画像のようなアニメーションが表示されました。