[React] framer-motion 사용후기

framer-motion이라는 react 라이브러리를 사용해 봤다.

css만으로 표현하기에 복잡하고 힘든 애니메이션을 쉽고 간편하게 표현할 수 있도록 도와주는 멋진 라이브러리라고 생각한다.

---

Main Page

framer-motion 공식 메인페이지, 귀여운 애니메이션 예시 6가지가 우리를 반겨준다.

---

Install

npm install framer-motion

여느 라이브러리와 마찬가지로 터미널에서 install 후 사용한다.

---

기본 특징

import { motion } from 'framer-motion';



<div>hi</div> (X)

<motion.div></motion.div> (O)

framer motion은 기본적으로 motion이라는 키워드를 사용한다.

위와 같이 div태그는 motion.div 형태로 표현해야 애니메이션을 적용할 수 있게 된다.

** motion을 import 하는 것도 잊지 말아야 한다!

---

Variants

import React from 'react';
import { motion } from "framer-motion";

const container = {
  hidden: { opacity: 1, scale: 0 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      delayChildren: 0.3,
      staggerChildren: 0.2
    }
  }
};

const item = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1
  }
};

export const Example = () => (
  <motion.ul
    className="container"
    variants={container}
    initial="hidden"
    animate="visible"
  >
    {[0, 1, 2, 3].map((index) => (
      <motion.li key={index} className="item" variants={item} />
    ))}
  </motion.ul>
);

framer-motion에는 variants라는 기능을 지원한다.

애니메이션을 선언, 적용 등을 하기 위해서는 motion.div와 같은 태그에 여러 속성값을 적어야 한다. 그렇게 되면 코드는 자연스럽게 길고, 지저분해진다.

variants는 코드가 지저분해지는 것을 방지해 주는 역할이라고 보면 될 것 같다.

사용자가 원하는 애니메이션 및 효과를 미리 선언.

선언한 값의 이름만 가져다 쓰면 되는 구조이다.

const container = {   <--- variants의 이름(임의)
  hidden: { opacity: 1, scale: 0 }, <--- 애니메이션의 초기값(임의)
  visible: { <--- 애니메이션 활성화(임의)
    opacity: 1,
    scale: 1,
    transition: {
      delayChildren: 0.3,
      staggerChildren: 0.2
    }
  }
};


<motion.ul
    className="container"
    variants={container} <--- variants = {선언한 variants 이름}
    initial="hidden" <--- initial = {애니메이션의 초기값}
    animate="visible" <--- animation = {애니메이션 활성화}
  >

위의 ul 태그는 scale이 0인 상태에서 페이지 로딩 시 scale이 1이 된다.

 

그 외 transition 값도 지정이 가능하다.
흔히 우리가 css에서 사용하던 delay, duration, type 등 사용자가 원하는 값을 채워 넣기만 하면 된다.

---

그 외

framer-motion은 많은 기능을 갖고 있다.

WhileHover, WhileTab과 같이 사용자의 제스처에 반응하는 기능

드래그, 스크롤과 관련된 기능

svg 형식의 파일을 이용해 애니메이션을 구현하는 기능

AnimatePresence를 이용한 슬라이더 기능 등 모든 것을 쉽게 구현할 수 있다.

---

나는 비록 경험이 적지만 framer-motion을 알기 전과 후는 상당히 다른 느낌이다.

보다 손쉽게 다이나믹한 애니메이션을 만들 수 있게 되었고, css에 투자하던 시간이 줄었다.

앞으로도 react 버전에 호환성을 잘 맞춰 업데이트된다면, 꾸준히 이 라이브러리를 사용할 것 같다.

 

https://www.framer.com/motion/