Framer Motion Gestures

C-Jeril/framer-motion-skills/skills/framer-motion-gestures

作者 C-Jeril837d7268fc4a3cf5b1f8904616ec97c7485e3edaMIT8 个星标收录于 2026年10月9日更新于 2026年10月9日仓库6个月前更新

Official Framer Motion skill for gesture animations — drag, pan, tap, hover, focus, touch animations. Use when building interactive elements with drag, pan, tap, hover, or touch gestures, or when asking about Framer Motion drag constraints, gesture handlers, or interactive animations.

仅含说明Software Development

AI 生成的概览

Framer Motion 手势动画参考指南，涵盖拖拽、平移、点击、悬停和聚焦交互。

功能: 该技能提供使用 Framer Motion 实现手势驱动动画的参考文档和代码示例。内容涵盖拖拽属性与约束、平移跟踪、点击、悬停和聚焦动画、拖拽的弹簧物理效果、滑动检测以及手势状态回调。它还列出了最佳实践和常见陷阱。
适用场景: 适用于在 Framer Motion 中构建响应拖拽、平移、点击、悬停、聚焦或触摸手势的交互式 UI 元素。也适用于回答有关拖拽约束、手势处理器或交互式动画的问题。
运行要求: 无需脚本或特殊工具，仅为纯说明性参考。示例假定项目使用 Framer Motion（React/JSX）。

Framer Motion Gestures

When to Use This Skill

Apply when implementing gesture-driven animations: drag, pan, tap, hover, focus, or touch interactions. When the user asks about drag-and-drop, interactive elements, or gesture-based UI in Framer Motion.

Related skills: For core animation use framer-motion-core; for variants use framer-motion-variants; for layout animations use framer-motion-layout.

Drag

Enable dragging with the drag prop:

jsx

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

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

Drag Props

Prop	Type	Description
drag	`bool \| "x" \| "y"`	Enable drag on axis
dragConstraints	`object \| RefObject`	Movement constraints
dragMomentum	`boolean`	Continue momentum after release (default: true)
dragElastic	`number \| object`	Elasticity of bounds (default: 0)
dragTransition	`Transition`	Spring config for momentum
whileDrag	`MotionProps`	Animation while dragging
onDrag	`function`	Callback during drag
onDragStart	`function`	Callback when drag starts
onDragEnd	`function`	Callback when drag ends

Drag Constraints

jsx

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

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

Ref-based Constraints

jsx

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

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

Pan

Pan is similar to drag but for pointer/touch:

jsx

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

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

Pan vs Drag

Drag: Mouse/touch with visual feedback, momentum, and constraints
Pan: Lower-level pointer tracking without momentum

Tap (whileTap)

Animation when pressed:

jsx

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

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

Hover (whileHover)

Animation on hover:

jsx

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

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

onHoverStart / onHoverEnd

jsx

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

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

Focus (whileFocus)

Animation when focused (keyboard):

Drag with Spring Physics

jsx

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

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

Drag Controls with Constraints

jsx

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 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 }}        />      ))}    </>  );}

Swipe Detection

jsx

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}    />  );}

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}    />  );}

Gesture State Info

Callbacks receive PointInfo and DragInfo:

jsx

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

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

Best practices

✅ Use dragConstraints to keep elements within bounds.
✅ Use dragElastic for bounce-back effects.
✅ Use whileDrag for visual feedback during drag.
✅ Use dragMomentum for natural continuation.
✅ Use dragTransition with spring for physics-based drag.
✅ Use refs for constraints when dragging within a container.

Do Not

❌ Use drag without dragConstraints if the element should stay within bounds.
❌ Forget that drag events only fire after the pointer moves a threshold.
❌ Use excessive dragElastic — it can cause visual glitches.
❌ Animate conflicting properties during drag (e.g., scale and x).

Learn More

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

来源与署名

来源：C-Jeril/framer-motion-skills位于skills/framer-motion-gestures提交837d726

许可证： MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Framer Motion Gestures

Framer Motion Gestures

When to Use This Skill

Drag

Drag Props

Drag Constraints

Ref-based Constraints

Pan

Pan vs Drag

Tap (whileTap)

Hover (whileHover)

onHoverStart / onHoverEnd

Focus (whileFocus)

Drag with Spring Physics

Drag Controls with Constraints

Swipe Detection

Gesture State Info

Best practices

Do Not

Learn More

来源与署名

更多来自 C-Jeril/framer-motion-skills 的技能

Framer Motion Variants

Framer Motion Scroll

Framer Motion React

Framer Motion Layout

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices