프레이머 모션(Framer Motion)은 애니메이션에 직관적으로 접근합니다. JSX 마크업을 래핑(wrapping)하고 원하는 애니메이션 타입을 설정할 수 있도록 속성(props)을 허용하는 모션 컴포넌트를 제공합니다.
프레이머 모션의 핵심 컴포넌트는 다음과 같습니다.
모션(motion) 컴포넌트는 모든 애니메이션의 기초를 제공합니다. React 컴포넌트의 HTML 요소를 래핑하고 initial, animate 속성(props)에 전달된 상태로 해당 컴포넌트에 애니메이션을 설정합니다.
모션 컴포넌트를 사용하는 간단한 사용 방법을 살펴보겠습니다.
아래 div 요소가 페이지 로딩될 때 페이드인(fade-in)되기를 원한다고 가정해봅니다.
<div>일반 JSX 요소</div>
Framer Motion의 motion 컴포넌트를 불러옵니다.
import { motion } from 'framer-motion';