개요

Framer Motion 으로 Variants 구현합니다.

Variants

장점

1. 코드를 깔끔하게 해줍니다.
2. 많은 애니메이션들을 하나로 연결해줍니다.

코드를 깔끔하게 해줍니다

• Variants
  • 애니메이션의 무대
  • 컴포넌트의 미리 정의된 시각적 State

• 기본 애니메이션 동작을 Variants 로 변경해준 코드

const myVars = {
  start: { scale: 0 },
  end: { scale: 1, rotateZ: 360, transition: { type: "spring", delay: 0.5 } },
};

function App() {
  return (
    <Wrapper>
      <Box variants={myVars} initial="start" animate="end">
        Hello
      </Box>
    </Wrapper>
  );
}

많은 애니메이션들을 하나로 연결해줍니다

• 부모 컴포넌트에 variants 를 지정하고 애니메이션 효과를 주는 경우 자식에게도 자동으로 상속됩니다.
• variants 만 바꾸고 initial, animate prop 이름은 그대로 상속받아서 처리할 수 있습니다.
• 부모 컴포넌트 variants에서 자식 컴포넌트의 모션 딜레이, 순차 딜레이 등을 처리할 수 있습니다.

const boxVariants = {
  start: {
    opacity: 0,
    scale: 0.5,
  },
  end: {
    opacity: 1,
    scale: 1,
    transition: {
      type: "spring",
      duration: 0.5,
      bounce: 0.5,
      delayChildren: 0.5,
      staggerChildren: 0.2,
    },
  },
};

const circleVariants = {
  start: { opacity: 0, y: 10 },
  end: {
    opacity: 1,
    y: 0,
  },
};

function App() {
  return (
    <Wrapper>
      <Box variants={boxVariants} initial="start" animate="end">
        <Circle variants={circleVariants} />
        <Circle variants={circleVariants} />
        <Circle variants={circleVariants} />
        <Circle variants={circleVariants} />
      </Box>
    </Wrapper>
  );
}

참조

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