Skip to main content
Version: next

Press Animations

The press prop animates on pointer down/up for immediate feedback that a tap or click registered.

Usage​

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

<animate.button press={{ scale: withSpring(0.95) }}>Press me</animate.button>
<animate.button press={recipes.pressScale}>Press me</animate.button>

Combining with hover​

<animate.button
  hover={{ scale: withSpring(1.1) }}
  press={{ scale: withSpring(0.95) }}
>
  Interactive Button
</animate.button>

Hover and press compose: hovering scales to 1.1, pressing scales from whatever the current value is (1.1) down to 0.95, releasing returns to the hover state, and leaving returns to the base style.

Preview
tip

Use a slightly smaller press scale (0.94–0.97) than your hover scale so the press still reads clearly while the pointer is already hovering.

Next steps​