Framer Motion이란

Framer Motion은 React 애니메이션 라이브러리로서, 강력한 애니메이션 기능과 간편한 사용법을 제공한다. Framer Motion은 React 컴포넌트와 함께 사용하기 쉽고, 선언적인 API를 통해 애니메이션을 구성할 수 있다.

React 프로젝트를 진행하다가 애니메이션을 적용해야 하는데, 더 효율적인 작업을 위해 라이브러리를 사용하기로 했다.
여러가지 애니메이션 라이브러리가 있어서 고민하다가 원하는 효과를 구현할 수 있고 종종 입사 우대사항에 적혀있는 것을 봤던 Framer Motion을 선택하게 되었다.

주요 기능

1. 선언적인 애니메이션: Framer Motion은 선언적인 API를 통해 애니메이션을 구성할 수 있다. animate 속성을 사용하여 애니메이션을 정의하고, initial 속성을 사용하여 초기 상태를 설정할 수 있다. 애니메이션은 CSS 속성, 스프링(Spring), 물리 기반 애니메이션 등 다양한 방식으로 구성할 수 있다.

2. 반응형 애니메이션: Framer Motion은 useViewportScroll 훅을 통해 스크롤 위치나 뷰포트의 크기 등과 같은 정보를 사용하여 반응형 애니메이션을 구현할 수 있다. 이를 통해 스크롤 트리거, 뷰포트에 요소가 들어왔을 때 애니메이션 등을 구현할 수 있다.

3. 트랜지션(Transition): Framer Motion은 요소의 상태 변화를 트랜지션으로 정의할 수 있다.

4. 제어 가능한 상태(State): Framer Motion은 useState 훅과 유사한 방식으로 상태(State)를 관리할 수 있다.

5. 동시 애니메이션(AnimateSharedLayout): Framer Motion은 여러 요소 간의 애니메이션을 동기화하여 동시에 실행할 수 있는 AnimateSharedLayout 컴포넌트를 제공한다. 이를 통해 요소 간의 연결된 애니메이션을 자연스럽게 처리할 수 있다.

이런 여러가지 기능들을 지원해주어서 내가 원하는 효과를 그대로 표현할 수 있었다. 또한, Framer Motion은 많은 커뮤니티 지원과 함께 공식 문서와 예제를 제공한다.

사용법

일단 사용하기 위해서는 패키지를 다운받아야 한다.

yarn add framer-motion

타입스크립트를 지원하기 때문에 따로 타입스크립트 패키지는 설치하지 않아도 된다.

사용하고 싶은 파일에 motion을 import에서 컴포넌트 처럼 사용할 수 있다.

import { motion } from "framer-motion";

export default function test() {
	return <motion.div>test</motion.div>
}

그리고 원하는 애니메이션 효과를 Props처럼 전달해주면 된다.

<motion.div
  animate={{ x: 100 }}
  transition={{ ease: "easeOut", duration: 2 }}
/>

여러가지 CSS 요소를 전달해줄 수 있는데 모두 정리하기에는 비효율적이고 공식 문서가 최고이기 때문에 공식 문서를 참고하도록 하자.

[공식 문서] framer motion

Styled-Component와 함께 사용하기

Framer Motion은 React 컴포넌트와 함께 사용할 수 있기 때문에 Styled-Component와도 함께 사용할 수 있다.

import { motion, useScroll } from "framer-motion";
import styled from "styled-components";

export default function ProgressBar() {
  const { scrollYProgress } = useScroll();
  return (
    <ProgressBarStyled
      className="progress-bar"
      style={{ scaleX: scrollYProgress }}
    />
  );
}

const ProgressBarStyled = styled(motion.div)`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background-color: var(--accent-yellow);
  transform-origin: 0%;
`;

위 예제처럼 사용하면 스타일 지정과 애니메이션 효과를 동시에 적용할 수 있다.

참고
[공식 문서] framer motion
Framer Motion을 오랜만에 쓸 때 보는 간단한 포스트