Chapter 137: Gestures & Interaction (Recipes)

Core Idea

Curated recipes from Motion's official examples gallery for gestures & interaction. Each entry is implemented in one or more of vanilla JS, React, and Vue; consult the framework-specific example on motion.dev for the full runnable version.

Key Concepts

• drag (react): An example of making an element draggable using Motion for React's drag prop.
• hold to confirm (js, react): A Motion example showing long-press interaction. The button's events update a progress motion value that drives multiple
• press (js): An example of using Motion's press function to animate elements as a user presses them. press() automatically filters out right
• hover (js): An example of using Motion's hover function to animate elements as a user hovers over them. hover() automatically filters out
• bobble hover (react): A 3x3 grid of tiles that bobble with a spring when hovered, with the bounce scaled to how fast the pointer was moving, using
• swipe actions (react): iOS-style swipe actions where UI elements and animations respond dynamically to swipe progress. Actions trigger via taps or full
• tilt card (js, react): A card that tilts based on pointer position using Motion's spring animations.
• rotate (js, react): An example of a rotation animation in Motion.
• gestures (js, react): An example of using Motion's press and hover functions to animate elements as a user presses and hovers over them.

Code Examples

"use client"

export default function Drag() {
    return <div style={box} />
}

/**
 * ==============   Styles   ================
 */

const box = {
    width: 100,
    height: 100,
    backgroundColor: "#2f7cf8",
    borderRadius: 10,
}

• What it demonstrates: drag pattern.

"use client"

import { animate, motion, useMotionValue, useTransform } from "motion/react"

export default function HoldToConfirm() {
    return (
        <div style={styles.container}>
            <div style={styles.buttonWrapper}>
                <button style={styles.button}>
                    <div style={styles.buttonBackground} />
                    Hold to confirm
                </button>
            </div>
        </div>
    )
}

/** Copy styles from example source */

• What it demonstrates: hold to confirm pattern.

Key Takeaways

1. These are recipe-level compositions of core Motion primitives (variants, gestures, layout, scroll, springs), not new APIs.
2. Most recipes exist in multiple frameworks with near-identical logic, only the component syntax differs.
3. Reach for the closest-matching recipe as a starting point, then adapt timing/easing/spring values to the design.

Connects To

• Transitions, Keyframes & Variants: recipes here compose those lower-level primitives.
• Gestures & Interaction: several recipes layer on drag/hover/press gestures.