【Lottie】Lottieとは

LottieというAirbnbが開発しているアニメーションライブラリを知ったので試してみた

airbnb.design

とりあえずの使い方はこちらにすごく詳しく書かれていた 　 WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】 | PhotoshopVIP

IllustratorやAfterEffectまわりは省略して、それ以降のLottie JSONファイルをもらってからの実装をメモしておく

実装に必要なものは

• lottie.js
• Lottie JSONファイル

lottie.js は以下からダウンロードするか、npmインストールする
github.com

もしくはCDN経由で読み込む
bodymovin - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

あとは、次のようにJS内で設定を実装する

  lottie.loadAnimation({
    container: document.getElementById('lottie'), 
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'data.json', // jsonのパスを指定
  });

Lottie JSONファイルはIllustratorやAfterEffectで自作もできるし、以下からフリー素材を選んで使ってもよい

lottiefiles.com

今度自作してみたい