Skip to main content
Version: next

Hover Animations

The hover prop animates on pointer enter/leave.

Usage​

import { animate, withSpring, recipes } from 'react-ui-animate';

/* hover animates on pointer enter / leave */
<animate.button hover={{ scale: withSpring(1.1) }}>Hover me</animate.button>

/* Or pass a ready-made recipe */
<animate.button hover={recipes.hoverScale}>Preset</animate.button>
Preview

Combining with other props​

/* hover + press compose — each trigger owns its target */
<animate.button
  hover={{ scale: withSpring(1.1) }}
  press={{ scale: withSpring(0.95) }}
>
  Interactive Button
</animate.button>
note

hover only fires from real pointer enter/leave. On touch devices, prefer press instead: there is no lasting hover state.

Next steps​