Framer-Motion | Notion

Framer Motion의 애니메이션은 모션 컴포넌트의 유연한 animate 속성을 통해 제어된다. 간단한 애니메이션의 경우, animate props에서 직접 값을 설정할 수 있다.

<motion.div 
animate={{ rotate: 360 }} 
transition={{ duration : 2, type:'spring'}}>
</motion.div>

Transition은 값이 한 상태에서 다른 상태로 움직이는 방식을 정의한다. 또한, tween, spring 또는 inertia를 사용할 애니메이션 유형을 정의하는 소품을 허용할 수 있다.

const Wrapper = styled.div`
  height:100vh;
  width:100vw;
  display:flex;
  justify-content:center;
  align-items:center;
`;

//  스타일을 motion div에 덧붙이고 그걸 Box에 적용할 수 있다.
const Box = styled(motion.div)`  
  width:200px;
  height:200px;
  background-color:white;
  border-radius:10px;
  box-shadow:0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;

//  motion prop 중 가장 중요한 건 animate, 그리고 transition(원하는 걸 특정 가능)
function App() {
  return (
    <Wrapper>
      <Box 
      transition={{type:"spring", stiffness:15, damping:5}}
      initial={{scale:0}} animate={{scale:1, rotateZ:"360deg"}} />
    </Wrapper>
  );
}