Skip to main content
Version: Next

Hover Animations

Hover animations are one of the most common interactions in web applications. React UI Animate makes it easy to create smooth, responsive hover effects using the hover prop.

Basic Usage​

The hover prop accepts an animation descriptor that runs when the user hovers over the element:

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

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

Multiple Properties​

You can animate multiple properties on hover:

<animate.button
  hover={{
    scale: withSpring(1.1),
    backgroundColor: withSpring('#ff6d6d'),
    translateY: withSpring(-2),
  }}
>
  Hover me
</animate.button>

Using Preset Animations​

React UI Animate includes a preset for common hover effects:

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

<animate.button hover={hoverScale}>
  Button with preset
</animate.button>

The hoverScale preset is equivalent to:

hover={{ scale: withSpring(1.1) }}

Real-World Examples​

Example 1: Interactive Card​

function InteractiveCard() {
  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.05),
        translateY: withSpring(-8),
        boxShadow: withSpring('0 8px 24px rgba(0,0,0,0.15)'),
      }}
    >
      <h3>Card Title</h3>
      <p>Hover to see the effect</p>
    </animate.div>
  );
}
function NavLink({ children, href }) {
  return (
    <animate.a
      href={href}
      style={{
        color: '#333',
        textDecoration: 'none',
        padding: '8px 16px',
        borderRadius: 4,
      }}
      hover={{
        backgroundColor: withSpring('rgba(51, 153, 255, 0.1)'),
        color: withSpring('#3399ff'),
      }}
    >
      {children}
    </animate.a>
  );
}
function GalleryImage({ src, alt }) {
  return (
    <animate.img
      src={src}
      alt={alt}
      style={{
        width: '100%',
        height: 'auto',
        borderRadius: 8,
        cursor: 'pointer',
      }}
      hover={{
        scale: withSpring(1.05),
        filter: withSpring('brightness(1.1)'),
      }}
    />
  );
}

Combining with Other Props​

You can combine hover with other animation props:

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

Best Practices​

✅ Do​

  • Use withSpring for natural, responsive hover effects
  • Keep hover animations subtle (small scale changes, 1.05-1.1)
  • Use transforms (scale, translateY) instead of layout properties
  • Combine hover with press for better feedback

❌ Don't​

  • Don't make hover animations too aggressive (large scale changes)
  • Don't animate layout properties (width, height) on hover
  • Don't forget to provide visual feedback for interactive elements
  • Don't use hover on mobile (use press instead)

Performance Tips​

  1. Use transforms - scale, translateX, translateY are GPU-accelerated
  2. Keep it simple - Simple hover effects perform better
  3. Use spring animations - They feel more natural and responsive

Next Steps​