framer-motion(한국어)

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

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

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

Features

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

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

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

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

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


Installation

Framer Motion을 설치하는 것은 매우 간단합니다. npm install framer-motion을 실행하면 됩니다. 이렇게 하면 프로젝트의 node_modules 디렉토리에 Framer Motion 라이브러리가 추가됩니다.

주의 사항

  • Name
    Node.js와 npm의 버전
    Type
    주의 사항
    Description

    Node.js와 npm이 최신 버전인지 확인하십시오. 이는 라이브러리를 설치하거나 사용할 때 문제가 발생하는 것을 방지하기 위한 중요한 단계입니다. Node.js와 npm의 버전을 확인하려면 터미널에서 node -v와 npm -v를 실행하면 됩니다.

  • Name
    프로젝트와 호환성
    Type
    주의 사항
    Description

    프로젝트의 다른 패키지와 Framer Motion이 호환되는지 확인하십시오. 패키지 간의 버전 충돌이 발생하면, 예기치 않은 문제가 발생할 수 있습니다.

  • Name
    개발 환경
    Type
    주의 사항
    Description

    Framer Motion은 React 기반 프로젝트에서 사용되므로, React가 이미 프로젝트에 설치되어 있어야 합니다. 또한, Framer Motion을 사용하려면 JSX 문법을 이해하고 사용하는 데 익숙해야 합니다.

Installation

npm install framer-motion

Usage

Framer Motion은 사용하기 매우 간단한 애니메이션 라이브러리입니다. 기본적인 사용법을 아래에 설명하겠습니다.

  • Name
    import
    Type
    사용법
    Description

    먼저, Framer Motion을 사용하려는 컴포넌트 파일에서 라이브러리를 임포트해야 합니다.

  • Name
    기본 사용법
    Type
    사용법
    Description

    그런 다음, 원하는 HTML 태그를 Framer Motion의 motion.[태그] 요소로 바꿉니다. 예를 들어, div를 애니메이션으로 만들려면 다음과 같이 할 수 있습니다.

import

import { motion } from "framer-motion";

기본 사용법

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

Customization

Framer Motion은 매우 강력하며 유연한 라이브러리로, 이러한 기본적인 사용법 외에도 더 복잡한 애니메이션과 상호작용을 구현하는 데 사용할 수 있는 다양한 기능과 API를 제공합니다. 공식 문서를 참고하면 더 많은 정보를 얻을 수 있습니다.

설명

  • Name
    페이드인
    Type
    사용자화
    Description

    애니메이션을 추가하려면, animate prop을 사용하여 애니메이션 상태를 지정하면 됩니다. 예를 들어, div를 부드럽게 페이드인시키려면 다음과 같이 할 수 있습니다.

  • Name
    초기 상태 설정
    Type
    사용자화
    Description

    initial prop을 사용하여 초기 상태를 설정할 수 있습니다.

페이드인

  <motion.div animate={{ opacity: 1 }}>
    Hello, world!
  </motion.div>

초기 상태 설정

  <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
    Hello, world!
  </motion.div>

Example

Framer Motion을 사용한 애니메이션을 예제입니다. 여기서는 <motion.div> 요소를 사용하고 있으며, Framer Motion 라이브러리가 제공하는 특수한 div입니다. 이 요소를 사용하면, CSS 변형, 트랜지션, 그리고 다른 애니메이션 효과를 적용할 수 있습니다.

추가 설명

  • Name
    initial prop
    Type
    예시
    Description

    이 prop은 애니메이션의 시작 상태를 정의합니다. 이 경우, 시작 상태에서 <motion.div> 요소는 x축 방향으로 500px 이동하며 (x: 500), 투명도는 0 (opacity: 0)이고, 크기는 원래의 50% (scale: 0.5)입니다.

  • Name
    animate prop
    Type
    예시
    Description

    이 prop은 애니메이션의 최종 상태를 정의합니다. 이 경우, 최종 상태에서 <motion.div> 요소는 원래 위치로 돌아와 있으며 (x: 0), 투명도는 1 (opacity: 1)이고, 크기는 원래대로 돌아와 있습니다 (scale: 1).

  • Name
    transition prop
    Type
    예시
    Description

    이 prop은 애니메이션의 전환 방식을 정의합니다. 이 경우, 애니메이션의 지속 시간은 1초입니다 (duration: 1).


따라서 이 코드는, <motion.div> 요소가 처음에는 보이지 않는 상태에서 시작하여 (투명하고, 원래 크기의 50%이며, x축 방향으로 500px 이동한 상태), 1초 동안 점점 보이게 되며 (투명도가 점점 증가), 원래 위치로 돌아오며 (x축 방향으로 점점 원래 위치로 이동), 원래 크기로 돌아오는 (크기가 점점 증가) 애니메이션을 생성합니다.

Header.jsx

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