bodymovin

animation visualization

After Effects 플러그인인 bodymovin은 애니메이션을 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);