• 목차

포함된 모션 컴포넌트에 애니메이션 적용 방법

<figure /> 요소를 래핑한 Circle 컴포넌트를 모션 컴포넌트로 만들어 모션을 적용할 수 있습니다.

function Circle({ size = 100, color = '#fff', ...**restProps** }) {
  return (
	  <motion.figure
	    style={{
	      width: size,
	      height: size,
	      margin: 0,
	      background: color,
	      borderRadius: 9999,
	    }}
	    **{...restProps}**
	  />
	);
}

이제 컴포넌트에 animate 속성(prop)을 설정하면 애니메이션이 적용됩니다.

<Circle
  animate={{
    scale: 3,
    opacity: 0.7,
  }}
/>

글자 크기 애니메이션 적용 방법

타이틀 요소에 모션을 적용할 때 주의할 점은 글자 크기를 조정할 때는 숫자 값은 적용이 안된다는 점입니다. 숫자 값을 적용하면 TypeError: v.match is not a function 오류가 Console 패널에 출력됩니다.

이 문제를 해결하려면 숫자 값 대신, 문자 값(단위 포함)을 입력해야 합니다.

<motion.h2 lang="en" **animate={{ fontSize: '100px' }}**>
  Framer Motion
</motion.h2>