[React] Framer motion 애니메이션 적용 - 버튼, 모달, 스크롤, 화면전환

시작하기 앞서...

이번에 프로젝트를 하면서 framer motion 을 활용하여 버튼, 모달, 스크롤, 화면 전환 애니메이션을 적용하였다.

그래서 사용 방법에 대해 자세하게 정리하기 위해 글을 작성하게 되었다.

Documentation | Framer for Developers

 

---

 

Framer motion 적용

Framer motion 을 사용한 다섯 가지 애니메이션을 적용할 것이다.

1. 버튼 애니메이션
2. 모달 애니메이션
3. 스크롤 애니메이션
4. 화면 전환 애니메이션

 

우선 Framer motion 을 사용하기 위해 해당 라이브러리를 설치한다.

npm install framer-motion

 

1. 버튼 애니메이션

버튼을 눌렀을 때, 크기가 작아졌다가 다시 커지도록 애니메이션을 적용할 수 있다.

initial 은 초기상태의 애니메이션으로 버튼의 크기를 1로 지정하고, whileTap 은 버튼을 누르고 있을 때 애니메이션으로 크기를 0.9 로 줄어들게 하였다.

import { motion } from 'framer-motion';

...

const CustomButton = ({...}) => {
  return (
    <motion.button
      initial={{ scale: 1 }}
      whileTap={{ scale: 0.9 }}
    >
      ...
    </motion.button>
  );
};

버튼 - 결과

whileTap 이외에도 whileHover, whileFocus, whileDrag 등이 있다.

자세한 내용은 [Framer Motion - Gestures] 에서 확인할 수 있다.

 

2. 모달 애니메이션

모달이 나타날 때, 서서히 나타나고 사라지는 애니메이션을 적용할 수 있다.

AnimatePresence 는 모달처럼 조건부로 렌더링 되는 자식 컴포넌트를 제어한다.

initial 은 초기상태로 투명도를 0, animate 는 애니메이션 완료 후 투명도를 1, exit 는 모달이 사라질 때 투명도를 0 으로 하였다.

그리고 transition 은 애니메이션이 어떻게 진행될지 설정하며, 지속시간 duration 을 0.5 로 하고, 속도 곡선 ease 를 easeInOut 으로 하였다.

import { motion, AnimatePresence } from 'framer-motion';

const Modal = ({}) => {
  return createPortal(
    <AnimatePresence>
      {isOpen && (
        <motion.aside
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5, ease: "easeInOut" }}
        >
         ...
        </motion.aside>
      )}
    </AnimatePresence>,
    document.body,
  );
};

모달 - 결과

AnimatePresence 에 관련된 내용은 [Framer Motion - AnimatePresence] 에서 확인할 수 있고

transition 에 관한 내용은 [Framer Motion - Transition] 에서 확인할 수 있다.

 

3. 스크롤 애니메이션

스크롤을 내릴 때, 서서히 등장하는 애니메이션을 적용할 수 있다.

initial 은 초기상태로 투명도 0이며 x 좌표를 오른쪽으로 50px 이동한 위치에 있고

whileInview 는 해당 요소가 뷰포트 안에 있을 때 적용할 애니메이션으로 투명도 1, x 좌표를 0 (원래 위치) 로 설정하고

viewport 는 뷰포트 설정으로 once 를 false 로 설정하여 뷰포트에 들어올 때마다 애니메이션을 반복하고

transition 으로 애니메이션을 설정하는데 특정 속성에 개별적으로 x: { duration: 1 } 설정할 수 있다.

import { motion } from 'framer-motion';

<motion.div
  initial={{ opacity: 0, x: 50 }}
  whileInView={{ opacity: 1, x: 0 }}
  viewport={{ once: false }}
  transition={{
    ease: 'easeInOut',
    duration: 2,
    x: { duration: 1 },
  }}
>
	...
</motion.div>

스크롤 - 결과

이 외에도 다양한 스크롤 애니메이션에 대한 자세한 내용은 [Framer Motion - Scroll] 에서 확인할 수 있다.

 

4. 화면 전환 애니메이션

AnimatePresence 는 조건부로 렌더링 되는 자식 컴포넌트를 제어한다.

import { AnimatePresence } from 'framer-motion';

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <AnimatePresence>
        <App />
      </AnimatePresence>
    ),
    children: [
    	...

화면 전환 애니메이션을 적용할 페이지 상위에 애니메이션을 적용한다.

initial 은 초기상태로 투명도 0으로, animate 는 애니메이션 완료 후 투명도를 1으로, exit 는 화면이 사라질 때 투명도를 0 으로 하였다.

그리고 transition 은 애니메이션이 어떻게 진행될지 설정하며, 지속시간 duration 을 1 으로 하였다.

import { motion } from 'framer-motion';

const ListPage = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 1 }}
    >
      ...
    </motion.div>
  );
};

 

---

 

마치며...

애니메이션을 Framer Motion 라이브러리를 사용하여 적용할 수 있어 간단하게 프로젝트의 퀄리티를 높일 수 있다

직접 구현해보면 좋겠지만 시간이 부족하거나 애니메이션에 큰 시간을 소비하기 싫은 경우 이렇게 라이브러리를 사용할 수 있다.

정말 유용하고 앞으로도 Framer Motion 을 사용할 거 같다.