framer-motion 설치

npm install framer-motion

motion 컴포넌트

• framer-motion에서는 motion컴포넌트를 이용하여 애니메이션을 적용한다.
• 기본적으로 html 태그와 동일하게 사용할 수 있다.

import { motion } from 'framer-motion';

function App() {
  return (
    <motion.div
      animate={{ x: 100 }}
      transition={{ duration: 0.5 }}
      style={{ width: 100, height: 100, backgroundColor: 'red' }}
    />
  );
}

export default App;

초기상태 & 애니메이션 정의

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 1 }}
>
  Hello, Denamu
</motion.div>

• initial : 초기 상태값을 정의한다. 위의 예시에는 opacity를 0으로 해서 서서히 나타나도록 한다.

• animate : 최종 상태값을 정의한다

• transition : 애니메이션의 전환 방식을 정의한다

  duration	애니메이션이 진행되는 시간(ms)
  delay	애니메이션이 시작되기 전 대기시간(ms)
  ease	애니메이션 실행 가속도(easeIn, easeOut, easeInOut)
  type	애니메이션 진행 방식(spring tween)
  repeat	애니메이션 반복 횟수(infinity)
  repeatType	애니메이션 반복 방식(loop, mirror, reverse)

hover & tap 시 애니메이션

<motion.button
  whileHover={{ scale: 1.2 }}
  whileTap={{ scale: 0.9 }}
>
  클릭!
</motion.button>

• whileHover : 마우스가 요소 위에 올라왔을 때 애니메이션을 정의한다.
• whileTap : 요소를 클릭할 때 애니메이션을 정의한다.

Variants 를 이용해 복잡한 애니메이션 관리