Chapter 19: React hover animation guide

Core Idea

Create hover animations and interactions using Motion for React.

Key Concepts

• The whileHover prop: The simplest and most common way to add a hover animation with Motion is with the motion c
• Customise the animation: Transitions can be defined for when we enter a hover gesture state by setting transition w
• 430+ production-ready examples.: JavaScript
• Event handlers: You can also listen for when a hover gesture starts and ends with the onHoverStart and onH
• hover() gesture recogniser: To use onHoverStart and onHoverEnd
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

<motion.button whileHover={{ scale: 1.1 }} />

• What it demonstrates: Core usage pattern for React hover animation guide.

Key Takeaways

1. The whileHover animation prop.
2. onHover events.
3. hover() gesture recogniser.

Connects To

• React gesture animations: related Motion doc page.
• React motion component: related Motion doc page.
• hover(): related Motion doc page.
• Hover example & tutorial for JavaScript: related Motion doc page.