ReactのアニメーションライブラリFramer Motionを触ってみた

こんにちは、パートナービジネス事業部の宇野です。

今回は、ReactのアニメーションライブラリFramer Motionというライブラリが気になったので触ってみた感想を書いていこうと思います。アニメーションは、適切に使用することでユーザーが次に何をすれば良いか理解しやすくなる大切なツールだと思います。

Framer Motionとは？

Framer Motionはこんな特徴があります。

シンプルなAPI: 初心者でも簡単にアニメーションを追加可能。
Reactと完全統合: JSXスタイルでアニメーションを記述。
柔軟性: ジェスチャーやドラッグ機能のサポート。

インストール

Framer Motionを追加するには、以下のコマンドを実行します。

npm install framer-motion

または、Yarnを使用してインストール:

yarn add framer-motion

使い方の紹介

左からテキストがスライドするアニメーション

motionコンポーネントを使用して要素にアニメーションを追加します。

import { motion } from 'framer-motion';

export default () => {
  return (
    <motion.div
      animate={{ x: 200 }} // X方向に200px移動
      transition={{ duration: 1 }} // 1秒間で完了
    >
      左からこんにちは
    </motion.div>
  )
};

ホバーアニメーション

whileHoverを使用して、ホバー時のアニメーションを定義できます。

import { motion } from 'framer-motion';

export default () => {
  return (
    <motion.button
      whileHover={{ scale: 1.1, backgroundColor: '#f00' }}
      style={{ padding: '10px 20px', fontSize: '16px' }}
    >
      ホバーしてみて
    </motion.button>
  )
};

アニメーションの状態管理

variantsを使うことで複数の状態を定義できます。

import { motion } from 'framer-motion';

const variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { duration: 10 } },
};

export default () => {
  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={variants}
    >
      ゆっくりあらわれるよ
    </motion.div>
  )
};

ドラッグ可能な要素を作成

import { motion } from 'framer-motion';

export default () => {
  return (
    <motion.div
      drag
      dragConstraints={{ top: 0, left: 0, right: 300, bottom: 300 }}
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'red',
      }}
    >
      ドラッグ！
    </motion.div>
  )
};

まとめ

Framer Motionは、簡単に高度なアニメーションを実現するための優れたライブラリです。本記事で紹介したのは一部分の基本的な使い方なので、実現したいアニメーションを独自で試してみてください。

motion.dev