Documentation

Gestures

Tap, hover, and focus gesture animations for React Native.

Gestures

Gesture-based animations respond to user interactions. On React Native, these map to native touch handlers instead of DOM events.

Gesture prefixes

Class prefix	Web event	RN handler	Description
`animate-tap:`	`whileTap`	`onPressIn` / `onPressOut`	While finger is pressing
`animate-hover:`	`whileHover`	`onHoverIn` / `onHoverOut`	Pointer hover (RN 0.71+)
`animate-focus:`	`whileFocus`	`onFocus` / `onBlur`	Element has focus
`animate-enter:`	`animate`	Mount animation	When component mounts
`animate-initial:`	`initial`	Starting state	Before entrance animation
`animate-exit:`	`exit`	Unmount animation	When component unmounts

Tap animations

The most common gesture on mobile. Animates while the user's finger is pressing, then reverts when released.

Scale on press

Scale on PressNative

9:41

Scale + opacity

Multi-property TapNative

9:41

Entrance + gesture combined

You can combine entrance animations with gesture animations on the same element:

Entrance + Tap CombinedNative

9:41

Staggered interactive list

Combine staggered entrance with tap gestures:

Staggered List ItemsNative

9:41

Hover animations

Note: whileHover requires React Native 0.71+ with Pointer Events enabled, or a connected mouse/trackpad. On pure touch devices, hover events don't fire.

<mw.View className="animate-hover:scale-105 animate-hover:opacity-90 animate-duration-200">
  <mw.Text>Hover with a mouse</mw.Text>
</mw.View>

Focus animations

Useful for TextInput and other focusable elements:

<mw.TextInput
  className="animate-focus:scale-102 animate-focus:border-w-2 animate-spring"
  placeholder="Focus me"
/>

Next steps

Springs & Easing — Fine-tune animation physics
Drag — Draggable elements with constraints