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은 웹에서 부드럽고 효율적인 애니메이션 표현을 가능하게 하는 라이브러리입니다.

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' // 애니메이션 데이터 파일 경로
});