Framer Motion / Motion アニメーションガイドライン

Framer Motion（現在は Motion）、React、TypeScript のエキスパートです。アニメーションを作成する際は、以下のガイドラインに従ってください。

コア原則

正しいパッケージからインポートする

• React プロジェクトでは import { motion } from "motion/react" を使用する（"framer-motion" は廃止済み）
• ライブラリは Framer Motion から Motion に改名されました
• 常に最新の Motion API を使用してください

パフォーマンス優先のアプローチ

• 最高のパフォーマンスのため、transform プロパティ（x、y、scale、rotate）と opacity をアニメーション化する
• これらのプロパティはハードウェア加速が可能で、レイアウト再計算をトリガーしません
• width、height、top、left、margin、padding のようなレイアウトシフトを引き起こすプロパティのアニメーション化は避けてください

ハードウェア加速

will-change を適切に使用する

// Transform をアニメーション化する場合
<motion.div
  style={{ willChange: "transform" }}
  animate={{ x: 100, y: 50, scale: 1.2 }}
/>

// その他の GPU 加速プロパティをアニメーション化する場合
<motion.div
  style={{ willChange: "opacity, transform" }}
  animate={{ opacity: 0.5, x: 100 }}
/>

willChange に追加するプロパティ

• transform - x, y, scale, rotate, skew 用
• opacity - opacity アニメーション用
• filter - blur、brightness など用
• clipPath - clip-path アニメーション用
• backgroundColor - 背景色トランジション用

アニメーションのベストプラクティス

複雑なアニメーションに Variants を使用する

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
};

const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: { y: 0, opacity: 1 }
};

共有要素トランジションに layoutId を使用する

<motion.div layoutId="shared-element" />

Spring アニメーションを優先する

// Spring はドuration ベースのアニメーションよりも自然に見える
<motion.div
  animate={{ x: 100 }}
  transition={{ type: "spring", stiffness: 300, damping: 30 }}
/>

React 統合

パフォーマンスのためのメモ化

// アニメーション variant をメモ化する
const variants = useMemo(() => ({
  hidden: { opacity: 0 },
  visible: { opacity: 1 }
}), []);

// コールバックをメモ化する
const handleAnimationComplete = useCallback(() => {
  // ハンドラロジック
}, []);

インラインスタイルオブジェクトを避ける

// 悪い例 - 毎回レンダーするたびに新しいオブジェクトを生成する
<motion.div style={{ willChange: "transform" }} />

// 良い例 - 外部で定義するか、メモ化する
const style = { willChange: "transform" };
<motion.div style={style} />

アクセシビリティ

減少モーション設定を尊重する

import { useReducedMotion } from "motion/react";

function Component() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <motion.div
      animate={{ x: shouldReduceMotion ? 0 : 100 }}
      transition={{ duration: shouldReduceMotion ? 0 : 0.3 }}
    />
  );
}

ジェスチャーアニメーション

ジェスチャープロップを正しく使用する

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
/>

スクロールアニメーション

スクロール連動アニメーションに useScroll を使用する

import { useScroll, useTransform, motion } from "motion/react";

function ParallaxComponent() {
  const { scrollYProgress } = useScroll();
  const y = useTransform(scrollYProgress, [0, 1], [0, -100]);

  return <motion.div style={{ y }} />;
}

終了アニメーション

終了アニメーションに AnimatePresence を使用する

import { AnimatePresence, motion } from "motion/react";

<AnimatePresence mode="wait">
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    />
  )}
</AnimatePresence>

一般的なパターン

スタッガード リストアニメーション

<motion.ul
  initial="hidden"
  animate="visible"
  variants={{
    visible: { transition: { staggerChildren: 0.07 } }
  }}
>
  {items.map((item) => (
    <motion.li
      key={item.id}
      variants={{
        hidden: { opacity: 0, y: 20 },
        visible: { opacity: 1, y: 0 }
      }}
    />
  ))}
</motion.ul>

ページトランジション

const pageTransition = {
  initial: { opacity: 0, x: -20 },
  animate: { opacity: 1, x: 0 },
  exit: { opacity: 0, x: 20 },
  transition: { duration: 0.3 }
};

パフォーマンスデバッグ

• React DevTools を使用してリレンダーを検査する
• Chrome DevTools のパフォーマンスタブを使用してアニメーションのジャンクを特定する
• 最小 60fps、高リフレッシュレートディスプレイでは 120fps を目指す
• 実際のデバイス、特に中程度のスペックの Android スマートフォンでテストする