Framer-motion 라이브러리

JINJIN·2024년 3월 25일
1

React

목록 보기
10/10
post-thumbnail

React를 위한 강력한 애니메이션 라이브러리
해당 게시글은 11.0.20 버전을 사용하였습니다. (작성일 기준 최신 버전)

Framer-motion란?

Framer MotionReact를 위한 강력한 애니메이션 라이브러리입니다. 흔히 사용하는 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

    • 컴포넌트에 적용할 애니메이션의 최종 상태를 정의합니다.
    • 예시: animate={{ x: 100, opacity: 1 }}는 컴포넌트를 x축으로 100px 이동시키고, 투명도를 1로 만듭니다.
  • initial

    • 애니메이션 시작 전 컴포넌트의 초기 상태를 정의합니다.
    • 예시: initial={{ opacity: 0 }}는 컴포넌트가 처음에는 완전히 투명하게 시작되도록 설정합니다.
  • exit

    • AnimatePresence 컴포넌트 안에서 컴포넌트가 언마운트될 때 적용할 애니메이션 상태를 정의합니다.
    • 예시: exit={{ opacity: 0 }}는 컴포넌트가 사라질 때 점점 투명해지도록 설정합니다.
  • transition

    • 애니메이션의 지속 시간(duration), 지연 시간(delay), 타이밍 함수(ease) 등 애니메이션의 전환 효과를 세부적으로 제어합니다.
    • 예시: transition={{ duration: 1, ease: "easeInOut" }}는 애니메이션의 지속 시간을 1초로 설정하고, 타이밍 함수로 'easeInOut'을 사용합니다.
  • variants

const myVariants = {
  visible: { opacity: 1 },
  hidden: { opacity: 0 }
};
  • 애니메이션의 상태(예: 보이기, 숨기기)를 미리 정의한 객체입니다.

  • 예시: variants={myVariants}와 같이 사용하고, animate="visible" 또는 initial="hidden"으로 상태를 적용합니다.

  • layout

    • 컴포넌트의 레이아웃 변경이 발생할 때 자동으로 애니메이션을 적용합니다. 예를 들어, 컴포넌트의 크기가 변경되거나 정렬이 변경될 때 부드러운 전환 효과를 줄 수 있습니다.
    • 예시: layout 속성을 컴포넌트에 추가하기만 하면 됩니다.

이 외에도 drag whileHover 등 다양한 속성이 있으므로 자세한 내용은 Framer Motion 공식문서에서 확인하시면 됩니다!

profile
안녕하세요! 배우는 것을 좋아하는 개발자 JINJIN입니다.

0개의 댓글

관련 채용 정보