Framer Motion Gestures

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

by C-Jeril837d7268fc4a3cf5b1f8904616ec97c7485e3edaMIT8 starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 6 months ago

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.

Instructions onlySoftware Development

AI-generated overview

Reference guide for Framer Motion gesture animations covering drag, pan, tap, hover, and focus interactions.

What it does: This skill provides reference documentation and code examples for implementing gesture-driven animations with Framer Motion. It covers drag props and constraints, pan tracking, tap, hover, and focus animations, spring physics for drag, swipe detection, and gesture state callbacks. It also lists best practices and common pitfalls.
When to use it: Use it when building interactive UI elements that respond to drag, pan, tap, hover, focus, or touch gestures in Framer Motion. It is also relevant when answering questions about drag constraints, gesture handlers, or interactive animations.
Requirements: No scripts or special tooling are required; it is an instructions-only reference. The examples assume a project using 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:

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

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

Pan

Pan is similar to drag but for pointer/touch:

Pan vs Drag

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

Tap (whileTap)

Animation when pressed:

Hover (whileHover)

Animation on hover:

onHoverStart / onHoverEnd

Focus (whileFocus)

Animation when focused (keyboard):

Drag with Spring Physics

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

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

Gesture State Info

Callbacks receive PointInfo and DragInfo:

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/

Source and attribution

Source:C-Jeril/framer-motion-skillsinskills/framer-motion-gesturesat commit837d726

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from C-Jeril/framer-motion-skills

Framer Motion Variants

C-Jeril

Reference guide for Framer Motion animation variants, covering state machines, orchestration, stagger, repeat and keyframes.

Software Development8updated 6 months ago

Framer Motion Scroll

C-Jeril

Reference guide for building scroll-linked animations with Framer Motion's useScroll, useTransform, and useInView hooks.

Software Development8updated 6 months ago

Framer Motion React

C-Jeril

Guides Framer Motion animation patterns in React, covering AnimatePresence, layout animations, useAnimation and SSR handling.

Software Development8updated 6 months ago

Framer Motion Layout

C-Jeril

Reference guide for Framer Motion layout animations: the layout prop, layoutId shared transitions, AnimatePresence and exit animations.

Software Development8updated 6 months ago

More in Software Development

Playground

anthropics

Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.

Software Development37Kupdated today

M5 Onboard

anthropics

Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.

Software Development37Kupdated today

Cardputer Buddy

anthropics

Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.

Software Development37Kupdated today

Web Design Guidelines

vercel-labs

Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.

Software Development32Kupdated 5 weeks ago

Vercel React Native Skills

vercel-labs

React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.

Software Development32Kupdated 5 weeks ago

Vercel React Best Practices

vercel-labs

Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.

Software Development32Kupdated 5 weeks ago

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

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