1. Framer Motion 기초

Framer Motion이란?

framer motion이란 단순하면서도 강력한 React 애니메이션 라이브러리이다.
현재 React 19버전은 지원하지 않고 있다고 한다.
https://www.framer.com/motion/

시작하기

npm install framer-motion

사용법

framer motion으로 기본적인 애니메이션을 넣는 방법은 단순한 편이다.

// js
import { motion } from "framer-motion";
import styles from "./index.module.css";

export default function AnimateFirst() {
  return <motion.div className={styles.div}>박스1</motion.div>;
}

/* css */
.div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: red;
  color: #fff;
  font-weight: 700;
  margin: 100px;
}

import로 불러온 후 애니메이션을 추가할 태그를 motion 컴포넌트로 변경해주면 준비가 끝난다.

기본 옵션

  <motion.div
    className={styles.div}
    initial={{ y: "-300px" }}
    animate={{ y: 0 }}
    transition={{
      duration: 3,
    }}
   >
      박스1
  </motion.div>

motion 컴포넌트의 기본 옵션으로는 initial과 animate가 있다.

• initial은 마운트 되었을 때 애니메이션을 설정하는 옵션이다. 만약 마운트 되었을 때 애니메이션을 넣고싶지 않다면 false로 설정해두면 된다.

• animate는 애니메이션이 끝나는 지점이다.
  initial과 animate에 여러 값을 설정할 수 있기 때문에 사용자는 쉽게 원하는 애니메이션을 만들 수 있다.

Refer: initial을 설정하지 않고 animate 값만 넣어도 애니메이션 실행이 된다.

transition={{
        // type: "spring", // 애니메이션이나 트랜지션의 종류를 정의할 때 사용
        // duration: 3, // 애니메이션이 실행되는 시간
        // delay: 0.5, // 지연 시간 설정
        // stiffness: 80, // 탄력도
        // mass: 0.3, // 질량을 뜻함. 질량이 클 수록 애니매이션이 느리고, 작을수록 빠름
        // damping: 8, // 진동을 줄이는 데 사용. damping이 없다면 요소가 계속 진동을 함
        // when: "beforeChildren", // 부모의 애니메이션이 시작 후 자식 애니메이션 진행
        // staggerChildren: 0.4, // 자식들이 0.4초 주기로 애니메이션 실행 ex) 0.4 -> 0.8 -> 1.2
       	// ...
}}

• transition은 애니메이션을 적용할 때 사용되는 애니메이션 유형을 적용하는 옵션이다.
  더 많은 옵션을 알고싶다면 공식문서로 가서 옵션을 확인해보면 좋다.

---

결론

프론트엔드를 배우기 전에는 제이쿼리로 쉽게 애니메이션을 만들었는데 리액트에서는 fadeToggle 조차 힘들게 만드는 것 같다. 그래서 이번에 알게된 framer motion은 리액트에서도 애니메이션을 쉽게 만들 수 있게 해주는 라이브러리이기 때문에 다음에 할 프로젝트나 개인 프로젝트에서 무조건 사용해보고 싶다.

오늘 작성한 내용은 framer motion의 기능 중 아주 기초만 메모했다.
공식 문서를 보면 scroll 이벤트, 3D, 커스텀 훅 등 여러 기능들이 많아서 기대가 된다👍