【Framer Motion】コンポーネントまとめ①【Motionコンポーネント】

FramerMotionとは

vanilaJS、Reactで使えるアニメーションライブラリ

事前準備

まずはnpmなどで自分のプロジェクトにインストールする

npm install framer-motion

motionコンポーネント

FramerMotionで基本となるのがmotion
コンポーネントをアニメーション可能にする
motion.divなどのように要素にmotion.をつけて使用

import { motion } from "framer-motion";
import Button from "@mui/material/Button";

export default function AnimatedButton() {
  return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
      <Button variant="contained">Click Me</Button>
    </motion.div>
  );
}

motionコンポーネントのprops

アニメーション関連

props名	できること
initial	コンポーネントの初期状態を指定
animate	コンポーネントがマウントされたときや更新されたときのターゲット状態を指定
variants	複数のアニメーション状態を定義
transition	アニメーションのトランジション設定を指定
exit	コンポーネントがツリーから削除されるときのターゲット状態を指定

initial（初期状態）

export const InitialExample = () => {
  return <motion.div initial={{ opacity: 0 }} />;
};

animate（ターゲット状態）

export const AnimateExample = () => {
  return <motion.div animate={{ x: 100 }} />;
};

exit（コンポーネント削除時のアニメーション）

AnimatePresenceと組み合わせて使用

export const ExitExample = () => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <>
      <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
      <AnimatePresence>
        {isVisible && <motion.div exit={{ opacity: 0 }} />}
      </AnimatePresence>
    </>
  );
};

transition（トランジションのカスタマイズ）

import { motion } from "framer-motion";

export const TransitionExample = () => {
  return (
    <motion.div
      animate={{ scale: 1.2 }}
      transition={{ type: "spring", stiffness: 100 }}
    />
  );
};

variants（複数の状態を定義）

import { motion } from "framer-motion";

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

export const VariantsExample = () => {
  return <motion.div variants={variants} initial="hidden" animate="visible" />;
};

ジェスチャー関連

ジェスチャーとは

Framer Motion でいうジェスチャー（gesture） とは、ユーザーのマウス操作やタッチ操作に反応して発火するアニメーションのこと

props名	できること
whileHover	ホバー時のアニメーションターゲットを指定
whileTap	タップ（クリック）時のアニメーションターゲットを指定
whileFocus	フォーカス時のアニメーションターゲットを指定
whileDrag	ドラッグ中のアニメーションターゲットを指定
whileInView	要素がビューポート内に入ったときのアニメーションターゲットを指定

whileHover（ホバー時のアニメーション）

export const WhileHoverExample = () => {
  return <motion.div whileHover={{ scale: 1.1 }} />;
};

whileTap（クリック時のアニメーション）

export const WhileTapExample = () => {
  return <motion.div whileTap={{ scale: 0.9 }} />;
};

whileFocus（フォーカス時のアニメーション）

export const WhileFocusExample = () => {
  return <motion.input whileFocus={{ scale: 1.05 }} />;
};

whileDrag（ドラッグ中のアニメーション）

export const WhileDragExample = () => {
  return <motion.div whileDrag={{ scale: 1.2 }} />;
};

whileInView（スクロール時のアニメーション）

export const WhileInViewExample = () => {
  return <motion.div whileInView={{ opacity: 1 }} />;
};

ドラッグ関連

props名	できること
drag	ドラッグを有効
dragConstraints	ドラッグの制約範囲を指定
dragElastic	ドラッグの弾性度合いを指定
dragMomentum	ドラッグ終了時の慣性を有効または無効にする
dragTransition	ドラッグ終了時のトランジション設定を指定

drag（ドラッグ可能にする）

export const DragExample = () => {
  return <motion.div drag="x" />;
};

スクロール関連

props名	できること
onViewportEnter	要素が ビューポートに入ったとき に呼ばれるイベントハンドラー
onViewportLeave	要素が ビューポートから外れたとき に呼ばれるイベントハンドラー
viewport	ビューポートの動作を細かく設定

onViewportEnterとonViewportLeave

export const OnViewportExample = () => {
  return (
    <motion.div
      onViewportEnter={() => console.log("Entered viewport")}
      onViewportLeave={() => console.log("Left viewport")}
    />
  );
};

viewport（スクロール関連の詳細設定）

export const ViewportExample = () => {
  return (
    <motion.div whileInView={{ opacity: 1 }} viewport={{ once: true, amount: 0.5 }} />
  );
};