"알잘딱깔센" 이라는 용어를 아시나요? '알아서 잘 딱 깔끔하고 센스있게'의 줄임말 인데요.

'framer-motion'은 리액트에서 쉽게 사용가능한 "알잘딱깔센"을 자동으로 적용해주는 핫한 애니메이션 라이브러리 입니다.

'framer-motion'은 'animate' props에 값을 설정하면 CSS transitions가 자동생성되는 방법으로 애니메이션을 만들어줍니다. 예를 들어 x/y값이 변경 될때는 튀는 듯한 스프링 효과를 적용하거나, 투명도나 색상이 바뀔 때는 부드러운 트윈 효과를 적용하여 자연스러운 애니메이션을 구현합니다.

사용법은 매우 직관적인데요. HTML 태그 앞에 'motion' 키워드를 붙여 'motion component'를 생성하여 초기 상태를 'initial'속성에 넣고, 애니메이션 할 상태를 'animate'속성에 객체 형태로 정의합니다.

<motion.div

initial={{ scale: 0 }}

animate={{ scale: 1, rotateZ: 360 }}

/>

이렇게 속성을 넣어주기만 하면, 'animate' 속성의 값이 변경될 때마다 자동으로 애니메이션을 적용합니다.

적절한 애니메이션 작업이 필요할때 'framer-motion' 라이브러리의 도입을 고려해보시는것을 추천드립니다.

https://www.framer.com/motion/