개요

최근 UI/UX 트렌드인 모션 UI 에 대해 학습하며 개인 프로젝트, 실무에 사용합니다.

---

프레이머 모션 기본 사용법

프레이머 모션을 사용하고 싶다면 <motion.div> 와 같이 html 태그 앞에 motion. 을 붙여주어야 합니다.

• 스타일드 컴포넌트를 사용했을 때 <motion.Box> 등과 같이 적용할 수 없습니다

스타일드 컴포넌트와 프레이머 모션을 함꼐 사용 하는 방법

• motino.<html태그> 를 상속받아 오는 것과 같이 스타일드 컴포넌트 적용

const Box = styled(motion.div)`
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 10px;
`

---

Framer Motion Props

Framer Motion 에서 제일 중요한 첫 번째 Prop

• animate

function App() {
  return (
    <Wrapper>
      <Box animate={{ borderRadius: "100px" }} />
    </Wrapper>
  );
}

그외 다른 Props

• transition CSS 코드를 작성하지 않고 보다 쉽게 모션 적용가능

function App() {
  return (
    <Wrapper>
      <Box transition={{ duration: 3 }} animate={{ borderRadius: "100px" }} />
    </Wrapper>
  );
}

기본 애니메이션에 사용되는 Props

• initial : 새로고침 후 첫 모습
• 모든 모션에는 ease 와 같은 스프링 효과가 달려있습니다.

function App() {
  return (
    <Wrapper>
      <Box initial={{ scale: 0 }} animate={{ scale: 1, rotateZ: 360 }} />
    </Wrapper>
  );
}

• 스프링 효과를 제거하거나 수정해줄 수 있습니다

function App() {
  return (
    <Wrapper>
      <Box
        transition={{ type: "tween" }}
        initial={{ scale: 0 }}
        animate={{ scale: 1, rotateZ: 360 }}
      />
    </Wrapper>
  );
}

• 물리 현상 시뮬레이트 효과를 줄 수 있습니다 (stiffness)

function App() {
  return (
    <Wrapper>
      <Box
        transition={{ type: "spring", stiffness: 10 }}
        initial={{ scale: 0 }}
        animate={{ scale: 1, rotateZ: 360 }}
      />
    </Wrapper>
  );
}

• 물리 현상 시뮬레이트 효과를 줄 수 있습니다 (damping)

function App() {
  return (
    <Wrapper>
      <Box
        transition={{ type: "spring", damping: 10 }}
        initial={{ scale: 0 }}
        animate={{ scale: 1, rotateZ: 360 }}
      />
    </Wrapper>
  );
}

• 첫번째 기본 애니메이션

function App() {
  return (
    <Wrapper>
      <Box
        transition={{ type: "spring", delay: 0.5 }}
        initial={{ scale: 0 }}
        animate={{ scale: 1, rotateZ: 360 }}
      >
      </Box>
    </Wrapper>
  );
}

---

참조

Framer Motion Docs
리액트 마스터클래스, 노마드코더