Animation Types

Complete guide to all available animations and entrance effects

Motion Icons React includes 10+ pre-built animations that you can use right away. This guide explains each animation, when to use it, and how to customize it.

Understanding Animation Types

There are two types of animations in Motion Icons React:

1. Main Animations: Loop continuously (or based on triggers)
2. Entrance Animations: Play once when the icon first appears

You can use them separately or combine them for more complex effects.

Main Animations

Main animations loop continuously by default. You can control when they play using the trigger prop (see examples below).

Pulse

A gentle pulsing effect that scales the icon slightly larger and smaller.

<MotionIcon name="Heart" animation="pulse" />

What it does: Icon smoothly grows to 110% size and shrinks back to 100%, creating a breathing effect.

Best for:

• Notification badges
• Drawing attention to important buttons
• Live status indicators
• Heartbeat or activity monitors

Spin

Continuous 360-degree rotation at a steady speed.

<MotionIcon name="Loader2" animation="spin" />

What it does: Icon rotates clockwise in a complete circle, repeating indefinitely.

Best for:

• Loading spinners
• Refresh/reload buttons
• Processing indicators
• Sync status icons

Pro tip: Use with circular icons like Loader2, RefreshCw, or Settings for best visual effect.

Bounce

Vertical bouncing motion with elastic easing, like a ball bouncing.

<MotionIcon name="ArrowUp" animation="bounce" />

What it does: Icon moves up and down with a natural bouncing effect, slowing at the top and accelerating down.

Best for:

• Scroll-to-top buttons
• Download buttons
• Call-to-action elements
• Playful, friendly interfaces

Pro tip: Works great with directional icons like arrows or icons that suggest movement.

Ping

Radar-like expanding effect with opacity fade.

<MotionIcon name="Wifi" animation="ping" />

Best for: Connection status, live indicators, real-time updates

Wiggle

Side-to-side shaking motion.

<MotionIcon name="Bell" animation="wiggle" />

Best for: Error states, attention-grabbing, notifications

Flip

3D flip animation along the Y-axis.

<MotionIcon name="RefreshCw" animation="flip" />

Best for: Toggle states, refresh actions, state changes

Heartbeat

Double-pulse animation mimicking a heartbeat.

<MotionIcon name="Heart" animation="heartbeat" />

Best for: Like buttons, health apps, emotional connections

Shake

Horizontal shaking motion.

<MotionIcon name="AlertTriangle" animation="shake" />

Best for: Error messages, warnings, invalid inputs

Swing

Pendulum-like swinging motion.

<MotionIcon name="Clock" animation="swing" />

Best for: Time-related icons, playful animations, waiting states

Tada

Celebration animation with scale and rotation.

<MotionIcon name="Trophy" animation="tada" />

Best for: Success messages, achievements, celebrations

Rubber

Rubber band effect with elastic scaling.

<MotionIcon name="Star" animation="rubber" />

Best for: Interactive elements, button feedback, playful interactions

Entrance Animations

These animations play once when the component mounts, creating engaging entrance effects.

Fade Animations

Fade In

<MotionIcon name="Star" entrance="fadeIn" />

Simple opacity transition from 0 to 1.

Fade In Up

<MotionIcon name="ArrowUp" entrance="fadeInUp" />

Fades in while moving up from below.

Fade In Down

<MotionIcon name="ArrowDown" entrance="fadeInDown" />

Fades in while moving down from above.

Fade In Left

<MotionIcon name="ArrowLeft" entrance="fadeInLeft" />

Fades in while moving from the left.

Fade In Right

<MotionIcon name="ArrowRight" entrance="fadeInRight" />

Fades in while moving from the right.

Scale Animations

<MotionIcon name="Plus" entrance="scaleIn" />

Scales up from 0 to full size with a smooth easing curve.

Slide Animations

Slide In Up

<MotionIcon name="Upload" entrance="slideInUp" />

Slides in from bottom without opacity change.

Slide In Down

<MotionIcon name="Download" entrance="slideInDown" />

Slides in from top without opacity change.

Special Effects

Rotate In

<MotionIcon name="RotateCw" entrance="rotateIn" />

Rotates while fading in for a dynamic entrance.

Zoom In

<MotionIcon name="ZoomIn" entrance="zoomIn" />

Combines scaling and fading for an impactful entrance.

Combining Animations

You can combine entrance animations with main animations for rich effects:

<MotionIcon
  name="Heart"
  entrance="zoomIn"
  animation="heartbeat"
  animationDuration={800}
/>

Animation Triggers

Control when animations play using the trigger prop:

Always (Default)

<MotionIcon name="Star" animation="pulse" trigger="always" />

Animation plays continuously.

Hover

<MotionIcon name="Heart" animation="heartbeat" trigger="hover" />

Animation plays only on hover.

Click

<MotionIcon name="Bell" animation="shake" trigger="click" />

Animation plays on each click.

Focus

<MotionIcon name="Search" animation="pulse" trigger="focus" />

Animation plays when focused (useful for interactive elements).

Customizing Animation Timing

Fine-tune your animations with timing controls:

<MotionIcon
  name="Loader2"
  animation="spin"
  animationDuration={2000}  // 2 seconds per rotation
  animationDelay={500}      // Wait 500ms before starting
/>

Performance Considerations

All animations are optimized for performance:

• CSS-based: Uses CSS transforms and opacity for smooth 60fps animations
• Hardware accelerated: Leverages GPU acceleration when available
• Reduced motion: Automatically respects prefers-reduced-motion setting
• Efficient: Minimal impact on bundle size and runtime performance

Accessibility

Motion Icons React is built with accessibility in mind:

• Animations are disabled when prefers-reduced-motion: reduce is set
• All animations maintain proper focus management
• Screen readers announce icon changes appropriately
• Keyboard navigation works seamlessly with animated icons

Pro tip: Use subtle animations like pulse for continuous effects and save dramatic animations like tada for special moments like success states.