Animation Guide

Hovue icons come with built-in animations that bring your interface to life. This guide covers all available animation types and how to customize them.

Animation Types

Hovue supports five animation types, each designed for different use cases:

Slide

The slide animation moves the icon in a direction. Perfect for arrows and navigation elements.

Bounce

The bounce animation creates a playful bounce effect. Great for success states and attention-grabbing elements.

Rotate

The rotate animation spins the icon. Ideal for loading states and refresh indicators.

Pulse

The pulse animation creates a subtle pulsing effect. Perfect for notifications and alerts.

Fade

The fade animation creates a smooth fade in/out effect. Great for transitions and state changes.

Animation Duration

Control the speed of animations using the animation-duration prop. Duration is specified in milliseconds.

Triggering Animations

On Hover

Animations can be triggered on hover by default:

On Click

Trigger animations programmatically on click:

Conditional Animations

Use animations conditionally based on state:

Best Practices

• Use appropriate animations: Match animation types to the icon's purpose (e.g., rotate for loaders, slide for arrows).
• Keep durations reasonable: 200-600ms is usually ideal. Too fast feels jarring, too slow feels sluggish.
• Don't overuse: Too many animated icons can be distracting. Use animations strategically.
• Consider accessibility: Respect prefers-reduced-motion when possible.

Examples

Check out the Examples Gallery to see animations in action.