bodymovin

animation visualization

Bodymovin is an After Effects plugin that allows exporting animations to SVG + JavaScript or canvas + JavaScript formats.

Latest Ver 5.12.2

Homepage

Github

31,069

📢 Bodymovin converts animations created in After Effects into formats usable on the web.

CDN Download

License: MIT

Asset Type :

View All Versions

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

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 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);