[React] Animations 사용 방법

Framer Motion을 사용하여 애니메이션을 간편하고 쉽게 만드는 방법을 알아보겠습니다. Framer Motion Framer는 디자이너들을 위해 프로토타입 등을 만들어 주는 회사입니다.

Framer Motion은 React 용 production-ready 모션 라이브러리입니다. 설치 $ npm install framer-motion 사용 Animation Framer Motion의 애니메이션은 모션 컴포넌트의 유연한 animate 속성을 통해 제어됩니다.

간단한 애니메이션의 경우 animate props에서 직접 값을 설정할 수 있습니다. motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} initial initial: boolea.....