Lottie interactivity library with Lottie animations

2021年1月5日

「Lottie playerを使って
アニメーションを表示」と言う
記事をご紹介いたしましたが、
今日は
interactivity libraryを使用して、
アニメーションに
インタラクティブ機能を追加してみます。

以下が、
lottie-player のCDN。

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

interactivity library のCDN

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>

任意のID付埋め込みコードを
追加します。

id="firstLottie"

<lottie-player id="firstLottie" src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json" style="width:400px; height: 400px;">"></lottie-player>

scriptを追加します。
「player:」には先ほどの
埋め込みコードで指定した
IDを書きます。

player:'#firstLottie',

LottieInteractivity.create({
  mode:"scroll",
  player:'#firstLottie',
  actions: [
    {
      visibility: [0,1],
      type: "seek",
      frames: [0, 300]
    }
  ]  
});

結果は以下。