React Academy · Lesson

Gesture Animations: Hover, Tap & Drag

Use whileHover, whileTap, and drag props to animate components on user gestures.

Gesture Animations: Hover, Tap & Drag is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Gesture Props Overview

Framer Motion gesture props animate components in response to user input without JavaScript event handlers. The key ones are whileHover, whileTap, whileDrag, and whileFocus.

whileHover

Defines the animated state while the cursor is hovering over the element. Reverts automatically when the cursor leaves.

<motion.button
  whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(0,0,0,0.15)' }}
  transition={{ type: 'spring', stiffness: 400, damping: 17 }}
>
  Hover me
</motion.button>

whileTap

Defines the animated state while the element is pressed. Perfect for button press feedback.

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

whileFocus

Animates when the element receives keyboard focus — great for accessible focus indicators.

<motion.input
  whileFocus={{ borderColor: '#4f46e5', boxShadow: '0 0 0 3px rgba(79,70,229,0.3)' }}
  transition={{ duration: 0.2 }}
/>

Enabling Drag

Add the drag prop to make an element draggable. Set to true, 'x', or 'y' to constrain the axis.

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
  whileDrag={{ scale: 1.1, cursor: 'grabbing' }}
  style={{ cursor: 'grab' }}
>
  Drag me
</motion.div>

dragConstraints with a Ref

Constrain drag to a container element using a ref instead of pixel values — the draggable element cannot leave the container.

const constraintsRef = useRef(null);

<div ref={constraintsRef} style={{ overflow: 'hidden', width: 300, height: 300 }}>
  <motion.div
    drag
    dragConstraints={constraintsRef}
    style={{ width: 80, height: 80, background: '#4f46e5' }}
  />
</div>

dragElastic

dragElastic controls how much the element can be dragged beyond its constraints (0 = no elasticity, 1 = full).

<motion.div
  drag
  dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
  dragElastic={0.2} // slight rubber-band effect
/>

dragSnapToOrigin

Setting dragSnapToOrigin makes the element spring back to its original position when released.

<motion.div
  drag
  dragSnapToOrigin
  dragElastic={0.5}
  style={{ width: 60, height: 60, background: '#e11d48', borderRadius: '50%' }}
/>

Pan Events

Use onPanStart, onPan, and onPanEnd to track cursor position during pan gestures without enabling full drag mode.

<motion.div
  onPan={(event, info) => {
    console.log('Point:', info.point.x, info.point.y);
    console.log('Delta:', info.delta.x, info.delta.y);
  }}
/>

Drag Events

Listen to drag lifecycle events: onDragStart, onDrag, and onDragEnd. The info object contains velocity and offset.

<motion.div
  drag="x"
  onDragEnd={(event, info) => {
    if (info.velocity.x > 500) onSwipeRight();
    if (info.velocity.x < -500) onSwipeLeft();
  }}
/>

Card Swipe Pattern

Implement a Tinder-style swipe using drag velocity to detect swipe direction on release.

function SwipeCard({ onSwipe }) {
  return (
    <motion.div
      drag="x"
      dragConstraints={{ left: 0, right: 0 }}
      dragElastic={0.7}
      onDragEnd={(_, info) => {
        if (Math.abs(info.velocity.x) > 400) {
          onSwipe(info.velocity.x > 0 ? 'right' : 'left');
        }
      }}
    />
  );
}

Quick Check

Which Framer Motion prop makes a dragged element snap back to its original position when released?

Recap

Use whileHover, whileTap, and whileFocus for interactive state animations. Add drag for draggable elements, constrain with dragConstraints, and use onDragEnd velocity to detect swipes.

Frequently asked questions

Is the “Gesture Animations: Hover, Tap & Drag” lesson free?

Yes — the full text of “Gesture Animations: Hover, Tap & Drag” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Gesture Animations: Hover, Tap & Drag”?

Use whileHover, whileTap, and drag props to animate components on user gestures. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Gesture Animations: Hover, Tap & Drag” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy