MCPInstall

framer-motion-gestures

by c-jeril

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.

Installs
778
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/c-jeril/framer-motion-skills --skill framer-motion-gestures
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads framer-motion-gestures automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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:

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

Drag Props

PropTypeDescription
dragbool | "x" | "y"Enable drag on axis
dragConstraintsobject | RefObjectMovement constraints
dragMomentumbooleanContinue momentum after release (default: true)
dragElasticnumber | objectElasticity of bounds (default: 0)
dragTransitionTransitionSpring config for momentum
whileDragMotionPropsAnimation while dragging
onDragfunctionCallback during drag
onDragStartfunctionCallback when drag starts
onDragEndfunctionCallback when drag ends

Drag Constraints

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

Ref-based Constraints

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:

<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:

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

Hover (whileHover)

Animation on hover:

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

Focus (whileFocus)

Animation when focused (keyboard):

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

Drag with Spring Physics

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

Drag Controls with Constraints

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

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:

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/

FAQ

What does the framer-motion-gestures skill do?

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.

How do I install framer-motion-gestures?

Run npx skills add https://github.com/c-jeril/framer-motion-skills --skill framer-motion-gestures in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/framer-motion-gestures/ (personal) or .claude/skills/framer-motion-gestures/ (project).

Which AI agents can use framer-motion-gestures?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is framer-motion-gestures safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains framer-motion-gestures?

It is published by c-jeril in c-jeril/framer-motion-skills. It has 778 recorded installs.

More from c-jeril/framer-motion-skills

View all →

framer-motion-react

c-jeril/framer-motion-skills

Official Framer Motion skill for React integration — AnimatePresence, motion components, useAnimation, layout animations. Use when building React animations, using AnimatePresence, Framer Motion with Next.js, or when asking about Framer Motion React patterns, cleanup, or SSR.

Frontend & Design828 installs

framer-motion-scroll

c-jeril/framer-motion-skills

Official Framer Motion skill for scroll-linked animations — useScroll, useTransform, scroll-triggered animations, parallax. Use when building scroll-driven animations, parallax effects, progress indicators, or when asking about Framer Motion scroll, useScroll, or scroll-linked animations.

815 installs

framer-motion-layout

c-jeril/framer-motion-skills

Official Framer Motion skill for layout animations — shared layout transitions, layoutId, exit animations, AnimatePresence. Use when building shared element transitions, layout animations, reorderable lists, or when asking about Framer Motion layout, layoutId, or shared transitions.

Frontend & Design782 installs

framer-motion-variants

c-jeril/framer-motion-skills

Official Framer Motion skill for animation variants — state machines, orchestrated animations, stagger, repeat, sequencing. Use when building orchestrated animations, animation state machines, staggered entrances, or when asking about Framer Motion variants, transition variants, or choreographed animations.

Frontend & Design771 installs

Popular other skills

View category →

hyperframes-cli

heygen-com/hyperframes

The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.

1.3M installs

triage

mattpocock/skills

Move issues and external PRs through a state machine of triage roles, categorise, verify, grill if needed, and write agent-ready briefs.

1M installs

ask-matt

mattpocock/skills

Ask which skill or flow fits your situation. A router over the skills in this repo.

778.4K installs

to-questionnaire

mattpocock/skills

Turn a decision you can't fully answer into a questionnaire for someone else to fill in.

508.9K installs

wait-what

mattpocock/skills

Stop. That last message did not land: re-pitch it.

459.7K installs

loop-me

mattpocock/skills

Grill me about specs for the workflows I want to build, within this workspace.

447.9K installs