Framer Motion

Framer Motion은 React에서 애니메이션을 구현하기 위해 사용하는 라이브러리로, CSS로 구현하기 어렵거나 불가능한 애니메이션을 구현할 수 있다.

Framer Motion의 특징

1. 간단한 사용법

Framer Motion은 React 컴포넌트로 구성되어 있어, React 개발자가 쉽게 애니메이션을 구현할 수 있다.

import { motion } from 'framer-motion';

const Example = () => (
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ duration: 1 }}
  >
    Hello, Framer Motion!
  </motion.div>
);

위 코드는, motion.div를 사용한 코드로 CSS로 표현하면 다음과 같다.

<div class="fade-in">Hello, CSS Animation!</div>

.fade-in {
  opacity: 0;
  animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

비교적 단순하고 쉽게 Fade-in을 구현할 수 있다.

2. 초기 및 애니메이션 상태 정의 가능

Framer Motion은 initial, animate, exit와 같은 속성을 통해 요소의 상태 변화를 간단히 정의할 수 있는데, 이를 이용하면 상태를 기반한 복잡한 CSS를 구현할 필요가 없어진다.

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1, scale: 1.2 }}
  exit={{ opacity: 0, scale: 0.8 }}
>
  애니메이션 상태 전환 예제
</motion.div>

위 기능을 CSS로 구현하면 다음과 같다.

<div class="fade-in">Hello, CSS Animation!</div>

.fade-and-scale {
  opacity: 0;
  transform: scale(0.8);
  animation: fadeAndScale 1s forwards;
}

@keyframes fadeAndScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

3. 제스처 및 이벤트 기반 애니메이션

드래그나 호버, 클릭 등 사용자의 인터렉션에 기반한 애니메이션을 구현하기에 용이하다.

<motion.div
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
>
  클릭하거나 호버하세요!
</motion.div>

이를 CSS로 구현하면 다음과 같다.

<div class="interactive-box">클릭하거나 호버하세요!</div>

.interactive-box {
  transition: transform 0.2s;
}
.interactive-box:hover {
  transform: scale(1.1);
}
.interactive-box:active {
  transform: scale(0.9);
}

4. 레이아웃 애니메이션

컴포넌트의 크기나 위치가 동적으로 변경될 때 자연스러운 전환을 제공하는 layout 속성도 지원한다. 이 속성은 React에서 컴포넌트가 렌더링될 때 상태가 변함에 따라 자동으로 크기와 위치를 계산하고 애니메이션으로 처리해줄 수 있다. 예를 들어 리스트의 아이템 추가, 삭제시의 레이아웃 변화를 부드럽게 처리할 수 있다.

CSS의 transition도 비슷한 효과를 구현할 수 있지만, 레이아웃 변화 시의 정확한 계산을 위해 추가적인 자바스크립트 코드가 필요할 수 있다는 단점이 존재한다.

<motion.div layout>컨텐츠</motion.div>

CSS로 구현하면 다음과 같다.

<div class="layout-box">컨텐츠</div>

.layout-box {
  transition: all 0.3s ease;
}