Chapter 17: React gesture animations

Core Idea

An overview of all the gestures available in Motion for React.

Key Concepts

• Animation props: motion components provide multiple gesture animation props: whileHover
• Gestures: The hover gesture detects when a pointer hovers over or leaves a component.
• Hover: The hover gesture detects when a pointer hovers over or leaves a component.
• Tap: The tap gesture detects when the primary pointer (like a left click or first touch poi
• Accessibility: Elements with tap events are keyboard-accessible.
• Gestures, with sauce.: The Motion+ Cursor component creates punchy cursor replacement and cursor follow gestures.
• Pan: The pan gesture recognises when a pointer presses down on a component and moves further th
• Drag: The drag gesture applies pointer movement to the x and/or y axis of the component.
• Focus: The focus gesture detects when a component gains or loses focus by the same rules as the C

Code Examples

<motion.button
  whileHover={{
    scale: 1.2,
    transition: { duration: 1 },
  }}
  whileTap={{ scale: 0.9 }}
/>

• What it demonstrates: Core usage pattern for React gesture animations.

Key Takeaways

1. React gesture animations supports Animation props.
2. React gesture animations supports Gestures.
3. React gesture animations supports Hover.

Connects To

• React hover animation guide: related Motion doc page.
• React scroll animation: related Motion doc page.
• Custom cursor & follow-cursor animations: related Motion doc page.
• React drag animation guide: related Motion doc page.
• useDragControls: related Motion doc page.