bodymovin

animation visualization

BodymovinはAfter Effectsプラグインで、アニメーションをSVG + JavaScriptまたはcanvas + JavaScript形式でエクスポートできるライブラリです。

Latest Ver 5.12.2

Homepage

Github

31,069

📢 Bodymovinは、After Effectsで作成されたアニメーションをウェブで使用可能な形式に変換します。

CDNダウンロード

License: MIT

Asset Type :

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

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/cjs/lottie.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/cjs/lottie_canvas.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/cjs/lottie_html.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/cjs/lottie_light.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/cjs/lottie_light_canvas.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/cjs/lottie_light_html.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/cjs/lottie_svg.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/esm/lottie.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/esm/lottie_canvas.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/esm/lottie_html.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/esm/lottie_light.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/esm/lottie_light_canvas.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/esm/lottie_light_html.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/esm/lottie_svg.min.js

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

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

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_canvas.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_canvas.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_canvas_worker.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_canvas_worker.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_html.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_html.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_light.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_light.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_light_canvas.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_light_canvas.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_light_html.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_light_html.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_svg.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_svg.min.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_worker.js

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_worker.min.js

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

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_html.d.ts

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_light.d.ts

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_light_canvas.d.ts

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_light_html.d.ts

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_svg.d.ts

Sample Code

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

📄 HTML
<div id='bm'></div>

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.5/lottie.min.js"></script>

⚙️ JavaScript
var animData = {
  container: document.getElementById('bm'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
};
var anim = bodymovin.loadAnimation(animData);