[React] lottie-react 사용법 (lottie 애니메이션)

https://lottiefiles.com/

LottieFiles: Download Free lightweight animations for website & apps.

 

위 사이트에서 가입후 사용이 가능하다.

 

사이트에서 원하는 Lottie의 json을 다운받는다. (색 , 시간 커스텀도 가능)

 

설치

https://www.npmjs.com/package/lottie-react

lottie-react

 

npm install lottie-react

 

사용

import Lottie from 'lottie-react';
import timerAnimationData from '../../assets/lottie/timerAnimationLottie.json';

export default function TimerAnimation({ className }: { className: string }) {
  return <Lottie animationData={timerAnimationData} className={className} />;
}