framer-motion-gestures
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" }}
/>
More from c-jeril/framer-motion-skills
framer-motion-scroll
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.
67framer-motion-react
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.
67framer-motion-variants
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.
64framer-motion-layout
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.
64