Skip to main content
Version: Next

Press Animations

Press animations provide immediate visual feedback when users interact with elements. The press prop triggers animations on mousedown/touchstart, making your UI feel responsive and interactive.

Basic Usage​

The press prop accepts an animation descriptor that runs when the user presses the element:

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

function PressButton() {
  return (
    <animate.button
      press={{
        scale: withSpring(0.95),
      }}
      style={{
        padding: '12px 24px',
        backgroundColor: '#3399ff',
        color: 'white',
        border: 'none',
        borderRadius: 8,
      }}
    >
      Press me
    </animate.button>
  );
}

Using Preset Animations​

React UI Animate includes a preset for common press effects:

import { pressScale } from 'react-ui-animate';

<animate.button press={pressScale}>
  Button with preset
</animate.button>

The pressScale preset is equivalent to:

press={{ scale: withSpring(0.95) }}

Multiple Properties​

You can animate multiple properties on press:

<animate.button
  press={{
    scale: withSpring(0.95),
    backgroundColor: withSpring('#ff6d6d'),
    translateY: withSpring(2),
  }}
>
  Press me
</animate.button>

Real-World Examples​

Example 1: Interactive Button​

function InteractiveButton() {
  return (
    <animate.button
      style={{
        padding: '12px 24px',
        backgroundColor: '#3399ff',
        color: 'white',
        border: 'none',
        borderRadius: 8,
        cursor: 'pointer',
      }}
      hover={{
        scale: withSpring(1.05),
      }}
      press={{
        scale: withSpring(0.95),
      }}
    >
      Click me
    </animate.button>
  );
}

Example 2: Card with Press Feedback​

function PressableCard() {
  return (
    <animate.div
      style={{
        width: 200,
        height: 200,
        background: 'white',
        borderRadius: 8,
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        cursor: 'pointer',
      }}
      hover={{
        scale: withSpring(1.02),
      }}
      press={{
        scale: withSpring(0.98),
        boxShadow: withSpring('0 1px 4px rgba(0,0,0,0.1)'),
      }}
    >
      <h3>Press me</h3>
      <p>Card content</p>
    </animate.div>
  );
}

Example 3: Icon Button​

function IconButton({ icon, onClick }) {
  return (
    <animate.button
      onClick={onClick}
      style={{
        width: 40,
        height: 40,
        borderRadius: '50%',
        border: 'none',
        background: '#f0f0f0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        cursor: 'pointer',
      }}
      press={{
        scale: withSpring(0.9),
        backgroundColor: withSpring('#e0e0e0'),
      }}
    >
      {icon}
    </animate.button>
  );
}

Combining with Hover​

For the best user experience, combine press with hover:

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

The interaction flow:

  1. User hovers → scale to 1.1
  2. User presses → scale to 0.95 (from current 1.1)
  3. User releases → scale back to 1.1 (hover state)
  4. User leaves → scale back to 1 (default)

Best Practices​

✅ Do​

  • Use subtle scale changes (0.9-0.95) for press feedback
  • Combine with hover for complete interaction feedback
  • Use withSpring for natural, responsive feel
  • Provide press feedback on all interactive elements

❌ Don't​

  • Don't make press animations too aggressive
  • Don't animate layout properties on press
  • Don't forget press feedback on mobile (it's crucial!)
  • Don't use press without hover (feels incomplete)

Performance Tips​

  1. Use transforms - scale is GPU-accelerated
  2. Keep it simple - Simple press effects perform better
  3. Use spring animations - They feel more natural

Next Steps​