framer-motion-gestures

Framer Motion のジェスチャー

このスキルを使う場面

ドラッグ、パン、タップ、ホバー、フォーカス、タッチ操作など、ジェスチャーによるアニメーションを実装するときに適用します。Framer Motion でドラッグ＆ドロップ、インタラクティブな要素、ジェスチャーベースの UI についてユーザーから質問された場合にも使用します。

関連スキル： コアアニメーションには framer-motion-core、バリアントには framer-motion-variants、レイアウトアニメーションには framer-motion-layout を使用します。

ドラッグ

drag プロパティを使ってドラッグを有効にします。

<motion.div
  drag="x"
  dragConstraints={{ left: -100, right: 100 }}
  whileDrag={{ scale: 1.1, cursor: "grabbing" }}
/>

ドラッグのプロパティ

プロパティ	型	説明
drag	bool | "x" | "y"	軸方向のドラッグを有効にします
dragConstraints	object | RefObject	移動範囲の制約
dragMomentum	boolean	リリース後も慣性を継続します（デフォルト：true）
dragElastic	number | object	境界の弾性（デフォルト：0）
dragTransition	Transition	慣性のスプリング設定
whileDrag	MotionProps	ドラッグ中のアニメーション
onDrag	function	ドラッグ中に呼び出されるコールバック
onDragStart	function	ドラッグ開始時に呼び出されるコールバック
onDragEnd	function	ドラッグ終了時に呼び出されるコールバック

ドラッグの制約

<motion.div
  drag
  dragConstraints={{
    left: -100,
    right: 100,
    top: -50,
    bottom: 50
  }}
/>

Ref による制約

function Draggable() {
  const constraintsRef = useRef(null);

  return (
    <>
      <motion.div
        ref={constraintsRef}
        style={{
          width: 500,
          height: 500,
          backgroundColor: "#eee"
        }}
      />
      <motion.div
        drag
        dragConstraints={constraintsRef}
      />
    </>
  );
}

パン

パンはドラッグに似ていますが、ポインター／タッチ向けです。

<motion.div
  drag="x"
  onDrag={(e, info) => {
    console.log("Position:", info.point);
    console.log("Velocity:", info.velocity);
  }}
/>

パンとドラッグの違い

• ドラッグ：マウス／タッチによる操作で、視覚的なフィードバック、慣性、制約があります
• パン：慣性のない、より低レベルのポインター追跡です

タップ（whileTap）

押したときのアニメーションです。

<motion.button
  whileTap={{ scale: 0.95, opacity: 0.8 }}
  whileHover={{ scale: 1.05 }}
>
  Click me
</motion.button>

ホバー（whileHover）

ホバー時のアニメーションです。

<motion.div
  whileHover={{ scale: 1.1, backgroundColor: "#ff0000" }}
  style={{ width: 100, height: 100, backgroundColor: "#00ff00" }}
/>

onHoverStart / onHoverEnd

<motion.div
  onHoverStart={() => console.log("Hover started")}
  onHoverEnd={() => console.log("Hover ended")}
/>

フォーカス（whileFocus）

フォーカス時（キーボード操作時）のアニメーションです。

<motion.input
  whileFocus={{ scale: 1.05, borderColor: "#00ff00" }}
  style={{ borderWidth: 2 }}
/>

スプリング物理を使ったドラッグ

<motion.div
  drag="x"
  dragConstraints={{ left: -200, right: 200 }}
  dragTransition={{
    type: "spring",
    stiffness: 300,
    damping: 20,
    mass: 1
  }}
/>

制約付きドラッグコントロール

function DraggableBox() {
  const constraintsRef = useRef(null);

  return (
    <>
      <motion.div
        ref={constraintsRef}
        style={{
          width: 500,
          height: 500,
          backgroundColor: "#f0f0f0"
        }}
      />
      {[1, 2, 3].map(i => (
        <motion.div
          key={i}
          drag
          dragConstraints={constraintsRef}
          dragMomentum={false}
          whileDrag={{ scale: 1.1 }}
        />
      ))}
    </>
  );
}

スワイプの検出

function Swipeable() {
  const x = useMotionValue(0);
  const { scrollYProgress } = useScroll();

  const opacity = useTransform(x, [-100, 0, 100], [0, 1, 0]);

  return (
    <motion.div
      style={{ x, opacity }}
      drag="x"
      dragConstraints={{ left: 0, right: 0 }}
      dragElastic={1}
    />
  );
}

ジェスチャー状態の情報

コールバックには PointInfo と DragInfo が渡されます。

onDrag={(e, info) => {
  info.point      // { x, y } position
  info.velocity   // { x, y } velocity
  info.offset     // { x, y } offset from start
}}

ベストプラクティス

• ✅ dragConstraints を使って、要素が範囲内に収まるようにします。
• ✅ dragElastic を使って、跳ね返る効果を加えます。
• ✅ whileDrag を使って、ドラッグ中の視覚的なフィードバックを提供します。
• ✅ dragMomentum を使って、自然な慣性を加えます。
• ✅ 物理ベースのドラッグには、dragTransition とスプリングを使用します。
• ✅ コンテナー内でドラッグする場合は、制約に ref を使用します。

避けること

• ❌ 要素を範囲内にとどめる必要がある場合に、dragConstraints なしで drag を使用しないでください。
• ❌ ポインターがしきい値を超えて移動した後にのみ、ドラッグイベントが発生する点に注意してください。
• ❌ dragElastic を過度に大きくしないでください。視覚的な不具合が発生する可能性があります。
• ❌ ドラッグ中に競合するプロパティ（例：scale と x）をアニメーションさせないでください。

詳細はこちら

https://www.framer.com/motion/gestures/ https://www.framer.com/motion/drag/