framer-motion-variants

Framer Motion のバリアント

このスキルを使用するタイミング

複数ステップのアニメーション、複数の要素にまたがる連動したアニメーションを作成する場合や、状態に基づくアニメーション制御にバリアントを使用する場合に適用します。バリアントは、再利用可能なアニメーション状態を定義し、振り付けるための Framer Motion の仕組みです。

関連スキル： 基本的なアニメーション用の props については framer-motion-core、React との統合については framer-motion-react、スクロール駆動型のバリアントについては framer-motion-scroll を使用します。

バリアントの定義

バリアントは、アニメーション状態を定義するオブジェクトです。

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

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

function Component() {
  return (
    <motion.div
      variants={container}
      initial="hidden"
      animate="visible"
    >
      {[1, 2, 3].map(i => (
        <motion.div key={i} variants={item} />
      ))}
    </motion.div>
  );
}

バリアントの種類

静的バリアント

const variants = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
  exit: { opacity: 0 }
};

動的バリアント

const variants = {
  animate: (custom) => ({
    x: custom * 100,
    opacity: 1
  })
};

オーケストレーション

staggerChildren

子要素のアニメーションをずらして開始します。

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2
    }
  }
};

staggerDirection

transition: {
  staggerChildren: 0.1,
  staggerDirection: -1  // 1 = forward, -1 = backward
}

繰り返しアニメーション

const variants = {
  animate: {
    scale: [1, 1.5, 1],
    transition: {
      duration: 2,
      repeat: Infinity,
      repeatType: "loop"  // "loop" | "reverse" | "mirror"
    }
  }
};

repeatType のオプション

種類	動作
"loop"	最初から再開します
"reverse"	前方向に再生した後、逆方向に再生します
"mirror"	繰り返すたびに状態を入れ替えます

キーフレーム

複数の値を順にアニメーションさせます。

<motion.div
  animate={{
    x: [0, 100, -50, 0],
    backgroundColor: ["#ff0000", "#00ff00", "#0000ff"]
  }}
  transition={{
    duration: 2,
    times: [0, 0.3, 0.6, 1]
  }}
/>

custom を使用したステートマシン

const states = {
  idle: { scale: 1 },
  hovered: { scale: 1.1 },
  pressed: { scale: 0.95 }
};

function Component({ state }) {
  return (
    <motion.div
      variants={states}
      animate={state}
      custom={state}
    />
  );
}

親子間の連携

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      when: "beforeChildren"
    }
  }
};

const child = {
  hidden: { x: -20, opacity: 0 },
  visible: {
    x: 0,
    opacity: 1,
    transition: { duration: 0.3 }
  }
};

ベストプラクティス

• ✅ 再利用可能で連動するアニメーションには variants を使用します。
• ✅ リストのアニメーションには staggerChildren を使用します。
• ✅ 動的な値を渡すには custom prop を使用します。
• ✅ AnimatePresence 用に exit バリアントを定義します。
• ✅ 親子間の連携には when オプションを使用します。

避けるべきこと

• ❌ モーション値とバリアントを不適切に混在させないでください。
• ❌ バリアントのトランジションは上書きされる場合があることを忘れないでください。
• ❌ バリアントの状態を増やしすぎないでください（3～5 個に抑えます）。
• ❌ 必要な場合に custom を渡し忘れないでください。

詳細はこちら

https://www.framer.com/motion/animation/ https://www.framer.com/motion/variants/