[React.js] Framer Motion 라이브러리

Framer Motion 라이브러리

들어가며

• Framer Motion 라이브러리에 대해 정리해본다.

 

Framer Motion

개념

• 인터랙티브 웹 애니메이션과 UI 디자인을 쉽게 구현할 수 있도록 도와주는 라이브러리
• 리액트 프레임워크와 함께 사용되며, 프론트엔드 개발자가 애니메이션을 더 직관적이고 효율적으로 만들 수 있게 도와준다.
• 강력한 API를 제공하여 복잡한 애니메이션을 쉽게 작성할 수 있게 해주며, 코드 기반의 애니메이션을 만들 때 생산성을 높여준다.

 

설치

$ npm install framer-motion    # yarn add framer-motion

 

주요 기능

• 기본적인 모션을 쉽게 적용할 수 있다.
  • 위치, 크기, 불투명도 등의 속성을 애니메이션화할 수 있다.
• 드래그와 같은 인터랙션을 손쉽게 구현할 수 있다.
  • 예를 들어, 사용자가 요소를 드래그할 때 해당 요소의 움직임을 제어할 수 있다.
• 변수(Variable)에 따라 애니메이션을 조절할 수 있어, 상태에 따라 다양한 애니메이션을 구현할 수 있다.
• CSS와 유사한 키프레임 애니메이션을 사용하여 더 복잡한 애니메이션을 구현할 수 있다.
• 리액트와의 통합을 중심으로 설계되었으며, 다른 서드파티 라이브러리와도 호환된다.

 

사용 방법

• @framer-motion@ 패키지의 @motion@ 컴포넌트를 @import@ 한다.

import { motion } from "framer-motion";

function MyComponent() {
  return (
    <motion.div
      animate={{ x: 100 }}  // 애니메이션으로 x축으로 100px 이동
      transition={{ duration: 1 }}  // 애니메이션 지속 시간 1초
    >
      Hello, World!
    </motion.div>
  );
}

 

사용 예

• @initial@과 @animate@를 사용하여 애니메이션의 시작 상태와 종료 상태를 설정할 수 있다.

import { motion } from "framer-motion";

function MyComponent() {
  return (
    <motion.div
      initial={{ opacity: 0 }}  // 초기 불투명도 0
      animate={{ opacity: 1 }}  // 애니메이션이 끝날 때 불투명도 1
      transition={{ duration: 2 }}  // 2초 동안 애니메이션 실행
    >
      Fade In
    </motion.div>
  );
}

 

• @whileHover@, @whileTap@ 등의 프로퍼티를 이용하여 사용자의 인터랙션에 따라 애니메이션을 적용할 수 있다.

import { motion } from "framer-motion";

function MyComponent() {
  return (
    <motion.button
      whileHover={{ scale: 1.2 }}  // 호버 시 버튼 크기 1.2배
      whileTap={{ scale: 0.8 }}  // 클릭 시 버튼 크기 0.8배
    >
      Click Me
    </motion.button>
  );
}

 

• 요소를 드래그할 수 있도록 하려면 @drag@ 속성을 사용한다.

import { motion } from "framer-motion";

function MyComponent() {
  return (
    <motion.div
      drag  // 드래그 가능 설정
      dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }}  // 드래그 가능한 범위 설정
      style={{ width: 100, height: 100, backgroundColor: 'blue' }}
    >
      Drag Me
    </motion.div>
  );
}

 

• Variants를 사용하여 여러 상태를 정의하고 이를 기반으로 다양한 애니메이션을 쉽게 관리할 수 있다.

import { motion } from "framer-motion";

const boxVariants = {
  hidden: { opacity: 0, scale: 0.8 },
  visible: { opacity: 1, scale: 1, transition: { duration: 0.5 } },
};

function MyComponent() {
  return (
    <motion.div
      variants={boxVariants}
      initial="hidden"
      animate="visible"
      style={{ width: 100, height: 100, backgroundColor: 'red' }}
    >
      Animate Me
    </motion.div>
  );
}

 

• 애니메이션이 순차적으로 실행되도록 @transition@ 속성에서 @delay@나 @staggerChildren@을 사용할 수 있다.

import { motion } from "framer-motion";

function MyComponent() {
  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={{
        hidden: { opacity: 0 },
        visible: { opacity: 1, transition: { staggerChildren: 0.3 } },
      }}
    >
      <motion.div variants={{ hidden: { x: -100 }, visible: { x: 0 } }}>
        Item 1
      </motion.div>
      <motion.div variants={{ hidden: { x: -100 }, visible: { x: 0 } }}>
        Item 2
      </motion.div>
      <motion.div variants={{ hidden: { x: -100 }, visible: { x: 0 } }}>
        Item 3
      </motion.div>
    </motion.div>
  );
}

 

• @onHoverStart@, @onTap@, @OnDragEnd@ 등의 이벤트 핸들러를 통해 사용자가 수행하는 동작에 맞춘 애니메이션을 추가할 수 있다.

import { motion } from "framer-motion";
import { useState } from "react";

function GestureExample() {
  const [isHovered, setIsHovered] = useState(false);
  const [isTapped, setIsTapped] = useState(false);

  return (
    <motion.div
      style={{
        width: 100,
        height: 100,
        backgroundColor: isHovered ? "blue" : "red",
        scale: isTapped ? 0.9 : 1,
        cursor: "pointer",
      }}
      onHoverStart={() => setIsHovered(true)}  // 호버 시작 시 호출
      onHoverEnd={() => setIsHovered(false)}  // 호버 종료 시 호출
      onTapStart={() => setIsTapped(true)}  // 클릭 시작 시 호출
      onTap={() => setIsTapped(false)}  // 클릭 종료 시 호출
      drag  // 드래그 가능 설정
      onDragStart={() => console.log("Drag started")}  // 드래그 시작 시 호출
      onDragEnd={() => console.log("Drag ended")}  // 드래그 종료 시 호출
    >
      Interact with me
    </motion.div>
  );
}

export default GestureExample;

 

참고 사이트

Documentation | Framer for Developers