lottie-web

animation ui-component visualization

lottie-web is a plugin that allows exporting animations created in Adobe After Effects to SVG + JavaScript or canvas + JavaScript.

Latest Ver 5.12.2

Homepage

Github

31,069

Touching Pixels, Stirring Emotions.

Unleash dazzling experiences with the magic of lottie-web animations.

lottie-web is a library that enables smooth and efficient animation representations on the web.

CDN Download

License: MIT

Asset Type :

View All Versions

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

⚠️ 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.

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

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