React를 위한 강력한 애니메이션 라이브러리
해당 게시글은 11.0.20 버전을 사용하였습니다. (작성일 기준 최신 버전)
Framer Motion
은 React를 위한 강력한 애니메이션 라이브러리입니다. 흔히 사용하는 GSAP 라이브러리랑 비슷하게 유연성이 뛰어나며, 성능이 우수해 많은 개발자들에게 인기가 있습니다.
저도 평소 GSAP를 자주 사용하다가 이번 리액트 프로젝트에 사용해보려고 공부해봤는데 생각보다 정말 쉽고 많은 기능이 있어서 흡족했습니다!
우선 Framer Motion 라이브러리는 React 전용 라이브러리임을 안내드립니다!
npm install framer-motion
라이브러리 패키지 설치 후
import { motion } from "framer-motion"
function MyComponent() {
return <motion.div animate={{ x: 100 }} />
}
컴포넌트 내에서 motion
을 import하고 사용할 수 있습니다. 위 예시는 간단한 x 축 이동 애니메이션을 적용한 것입니다.
motion.div 대신에 motion 객체와 함께 다른 HTML 태그 이름을 사용할 수도 있습니다
(예: motion.section, motion.article 등)
예시 코드에서 보듯이 Framer Motion 라이브러리는 요소 앞에 motion
을 추가해주고 다양한 속성을 추가하여서 애니메이션을 구현합니다.
animate={{ x: 100, opacity: 1 }}
는 컴포넌트를 x축으로 100px 이동시키고, 투명도를 1로 만듭니다.initial={{ opacity: 0 }}
는 컴포넌트가 처음에는 완전히 투명하게 시작되도록 설정합니다.AnimatePresence
컴포넌트 안에서 컴포넌트가 언마운트될 때 적용할 애니메이션 상태를 정의합니다.exit={{ opacity: 0 }}
는 컴포넌트가 사라질 때 점점 투명해지도록 설정합니다.transition={{ duration: 1, ease: "easeInOut" }}
는 애니메이션의 지속 시간을 1초로 설정하고, 타이밍 함수로 'easeInOut'을 사용합니다.const myVariants = {
visible: { opacity: 1 },
hidden: { opacity: 0 }
};
애니메이션의 상태(예: 보이기, 숨기기)를 미리 정의한 객체입니다.
예시: variants={myVariants}
와 같이 사용하고, animate="visible"
또는 initial="hidden"
으로 상태를 적용합니다.
layout
속성을 컴포넌트에 추가하기만 하면 됩니다.이 외에도 drag
whileHover
등 다양한 속성이 있으므로 자세한 내용은 Framer Motion 공식문서에서 확인하시면 됩니다!