lottie-web

animation ui-component visualization

lottie-webは、Adobe After Effectsで作成したアニメーションをSVG + JavaScriptまたはcanvas + JavaScriptにエクスポートできるプラグインです。

Latest Ver 5.12.2

Homepage

Github

31,069

ピクセルが感動を動かす、触れる。

lottie-webのアニメーションの魔法で鮮やかな体験を提供します。

lottie-webは、Web上でスムーズで効率的なアニメーション表現を可能にするライブラリです。

CDNダウンロード

License: MIT

Asset Type :

すべてのバージョンを見る

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_canvas.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_canvas.min.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_canvas_worker.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_canvas_worker.min.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_html.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_html.min.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_light.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_light.min.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_light_canvas.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_light_canvas.min.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_light_html.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_light_html.min.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_svg.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_svg.min.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_worker.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_worker.min.js

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.d.ts

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_html.d.ts

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_light.d.ts

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_light_canvas.d.ts

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_light_html.d.ts

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_svg.d.ts

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。

⚙️ JavaScript
import lottie from 'lottie-web';

const animation = lottie.loadAnimation({
  container: document.getElementById('animationContainer'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // 애니메이션 데이터 파일 경로
});