【React】framer-motionでのアニメーションサンプル10選

背景

UIにアニメーションを付ける事でよりモダンな見た目になる事があると思います。
Reactでボタンやテキスト、画像等を作成した際にも同様にアニメーションを付けてみたいです。
Reactにもアニメーションをつけれるライブラリがないか探してみたところ、
Framer Motionとreact-spring等がありました。
本記事ではFramer Motionを使用した基本的なサンプルを10個記載します。
これらを組み合わせればより複雑なアニメーションを実装できると思います。

framer-motionとは？

アニメーションライブラリ。
motion.divなどのコンポーネントを使用し、宣言的にアニメーションを実装する事ができる。

• framer-motion

本記事の環境

• react：18.2
• framer-motion：10.16.14
• vite：5.0

アニメーションサンプル10選

次のアニメーションgif内の番号とサンプルコードの番号は対応しております。

1. 回転アニメーション

<motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }}>
  <div className="figure1">1</div>
</motion.div>

2. ホバー時に回転するアニメーション

<motion.div whileHover={{ rotate: 360 }} transition={{ duration: 2 }}>
  <div className="figure1">2</div>
</motion.div>

3.回転し続けるアニメーション（2秒間隔）

<motion.div animate={{ rotate: 360 }} transition={{ duration: 2, repeat: Infinity }}>
  <div className="figure2">3</div>
</motion.div>

4.横からふわっと出てくるアニメーション（フェードイン）

<motion.div
  className="figure2"
  initial={{ opacity: 0, x: -100 }} 
  animate={{ opacity: 1, x: 0 }} 
  transition={{ duration: 2 }}>
  4
</motion.div>

5. ふわっとUIが大きくなるアニメーション（フェードイン）

<motion.div
  className="figure2"
  initial={{ scale: 0, opacity: 0 }}
  animate={{ scale: 1, opacity: 1 }}
  transition={{ duration: 1 }}>
  5
</motion.div>

6. ふわっとUIが小さくなるアニメーション（フェードアウト）

<motion.div
  className="figure2"
  initial={{ scale: 1, opacity: 1 }}
  animate={{ scale: 0, opacity: 0 }}
  transition={{ duration: 1 }}>
  6
</motion.div>

7. 移動アニメーション

<motion.div
  className="figure2"
  initial={{ x: -200 }}
  animate={{ x: 200 }}
  transition={{ duration: 1 }}>
  7
</motion.div>

8. 組み合わせアニメーション例（フェードイン・回転・ふわっとUIが大きくなる）

<motion.div
  className="figure2"
  variants={containerVariants}
  initial="hidden"
  animate="visible">
  8
</motion.div>

9. 色変化アニメーション(青→赤)

<motion.div
  className="figure3"
  initial={{ scale: 0, backgroundColor: '#3498db' }}
  animate={{ scale: 1, backgroundColor: '#e74c3c' }}
  transition={{ duration: 2 }}>
  9
</motion.div>

10.バウンドアニメーション

<motion.div
  className="figure2"
  initial={{ y: -300, opacity: 0 }}
  animate={{ y: 0, opacity: 1 }}
  transition={{ type: 'spring', stiffness: 300, duration: 1 }}>
  10
</motion.div>

本記事で使用した四角形に対するCSS

.figure1 {
  width: 100px;
  height: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  font-weight: 800;
}

.figure2 {
  width: 100px;
  height: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  font-weight: 800;
}

.figure3 {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  font-weight: 800;
}

これらを組み合わせれば、より複雑なアニメーションを実装できそうです。