Gesture Animations: Hover, Tap & Drag
Use whileHover, whileTap, and drag props to animate components on user gestures.
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>All lessons in this course
- Motion Components & Basic Animations
- Variants for Orchestrated Animations
- Gesture Animations: Hover, Tap & Drag
- Layout Animations & AnimatePresence