Framer는 React를 위한 오픈 소스 모션 라이브러리로, Framer가 제작하였습니다.

모션은 창의적인 전문가들을 위한 웹 빌더인 Framer를 동작시킵니다.

당신의 꿈의 사이트를 디자인하고 출시할 수 있습니다. 특별한 코드는 전혀 필요 없으며, 최대의 속도를 누릴 수 있습니다.

 

특징

1. 선언적(Declarative): Framer Motion은 React의 선언적 패러다임을 따르고 있습니다. 이는 즉, 애니메이션 상태를 선언적으로 기술하고 라이브러리가 전환을 처리하도록 할 수 있음을 의미합니다. 이 방식은 코드의 가독성을 높이고, 유지 보수를 쉽게 해줍니다.

2. 간편한 애니메이션 제어: 애니메이션을 시작, 중지, 반복 등 애니메이션의 상태를 제어하는 API가 간결하며, 이를 통해 복잡한 상호 작용도 쉽게 구현할 수 있습니다.

3. 자연스러운 모션: Framer Motion은 실제 물리적 세계에서의 움직임을 모방하는 효과를 제공하기 위해, 물리 기반의 애니메이션을 지원합니다. 이를 통해 사용자 경험을 더욱 자연스럽고 부드럽게 만들 수 있습니다.

4. 서버 사이드 렌더링(SSR) 호환: Framer Motion은 서버 사이드 렌더링에 완벽하게 호환되므로, SEO 최적화와 초기 페이지 로드 성능 향상에 도움이 됩니다.

5. 풍부한 기능: 드래그 기능, SVG 경로 애니메이션, 인스턴트 페이지 전환, 스크롤 애니메이션 등 다양한 기능을 제공합니다.

 

설치

Framer Motion을 설치하기 위해 npm install framer-motion 명령을 실행하기만 하면 됩니다. 이 과정을 통해 프로젝트의 node_modules 디렉토리에 Framer Motion 라이브러리가 추가됩니다.

설치 시 몇 가지 주의해야 할 사항이 있습니다:

• Node.js와 npm의 버전 확인: Framer Motion 설치 전에 Node.js와 npm이 최신 버전인지 확인해야 합니다. 최신 버전을 사용하면 설치하거나 사용 중 발생할 수 있는 문제를 방지할 수 있습니다. 버전을 확인하려면 터미널에서 node -v와 npm -v 명령을 실행합니다.

• 프로젝트와의 호환성: 프로젝트에 이미 있는 다른 패키지와 Framer Motion이 호환되는지 확인해야 합니다. 패키지 간의 버전 충돌은 예기치 않은 문제를 유발할 수 있습니다.

• 개발 환경: Framer Motion은 React 기반 프로젝트에서 사용됩니다. 따라서, 프로젝트에 React가 이미 설치되어 있어야 하며, JSX 문법에 대한 이해와 사용 능력이 필요합니다. React가 설치되어 있지 않다면, 먼저 React 환경을 구성해야 Framer Motion을 효과적으로 사용할 수 있습니다.

npm install framer-motion

 

사용법

Framer Motion은 사용하기 쉬운 애니메이션 라이브러리로, React 프로젝트에 동적인 애니메이션을 쉽게 추가할 수 있습니다. 사용 방법은 다음과 같습니다:

1. 라이브러리 임포트: 사용하고자 하는 컴포넌트 파일에서 Framer Motion을 임포트해야 합니다. 이는 Framer Motion의 기능을 해당 파일에서 사용할 수 있게 해줍니다.

2. 기본 사용법: HTML 태그를 Framer Motion의 motion.[태그] 요소로 변경하여 애니메이션을 적용합니다. 예를 들어, 애니메이션 효과를 적용하고자 하는 div 태그가 있다면, 이를 motion.div로 바꾸어 Framer Motion의 애니메이션 기능을 활용할 수 있습니다.

이러한 방식으로, Framer Motion을 사용하여 웹 애플리케이션에 다양한 애니메이션 효과를 쉽게 추가할 수 있으며, 사용자 인터페이스를 더욱 동적이고 생동감 있게 만들 수 있습니다.

import { motion } from "framer-motion";

<motion.div>
  Hello, world!
</motion.div>

 

예시

이 예제에서는 Framer Motion의 <motion.div> 요소를 사용하여 애니메이션을 구현하는 방법을 설명합니다. <motion.div>는 Framer Motion 라이브러리가 제공하는 특수한 div로, CSS 변형, 트랜지션, 그리고 다양한 애니메이션 효과를 쉽게 적용할 수 있습니다.

• initial prop: 애니메이션의 시작 상태를 정의합니다. 예제에서는 <motion.div> 요소가 시작할 때 x축 방향으로 500px 이동한 상태에서 시작하며, 투명도는 0(완전 투명), 크기는 원래의 50%로 설정되어 있습니다.

• animate prop: 애니메이션의 최종 상태를 정의합니다. 여기서 최종 상태는 <motion.div> 요소가 원래 위치로 돌아와 있으며, 투명도는 1(완전 불투명), 크기는 원래대로 100%입니다.

• transition prop: 애니메이션의 전환 방식을 정의합니다. 예제에서는 애니메이션의 지속 시간이 1초로 설정되어 있습니다.

이러한 설정을 통해, <motion.div> 요소는 처음에 보이지 않는 상태에서 시작해(투명하고, 원래 크기의 50%이며, x축 방향으로 500px 이동한 상태에서), 1초 동안 점차적으로 보이게 되며(투명도가 증가하고), 원래 위치로 돌아오고(원래 위치로 이동하며), 원래 크기로 돌아오는(크기가 증가하는) 애니메이션을 생성합니다. 이를 통해 사용자들은 시각적으로 매력적인 애니메이션 효과를 쉽게 구현할 수 있습니다.

<motion.div
  initial={{
    x: 500,
    opacity: 0,
    scale: 0.5,
  }}
  animate={{
    x: 0,
    opacity: 1,
    scale: 1,
  }}
  transition={{
    duration: 1,
  }}
</motion.div>