> ## Documentation Index
> Fetch the complete documentation index at: https://none-9e5c6865.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```tsx theme={null}
<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.

```tsx theme={null}
<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.

```tsx theme={null}
<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.

```tsx theme={null}
<MotionIcon name="Wifi" animation="ping" />
```

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

### Wiggle

Side-to-side shaking motion.

```tsx theme={null}
<MotionIcon name="Bell" animation="wiggle" />
```

**Best for:** Error states, attention-grabbing, notifications

### Flip

3D flip animation along the Y-axis.

```tsx theme={null}
<MotionIcon name="RefreshCw" animation="flip" />
```

**Best for:** Toggle states, refresh actions, state changes

### Heartbeat

Double-pulse animation mimicking a heartbeat.

```tsx theme={null}
<MotionIcon name="Heart" animation="heartbeat" />
```

**Best for:** Like buttons, health apps, emotional connections

### Shake

Horizontal shaking motion.

```tsx theme={null}
<MotionIcon name="AlertTriangle" animation="shake" />
```

**Best for:** Error messages, warnings, invalid inputs

### Swing

Pendulum-like swinging motion.

```tsx theme={null}
<MotionIcon name="Clock" animation="swing" />
```

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

### Tada

Celebration animation with scale and rotation.

```tsx theme={null}
<MotionIcon name="Trophy" animation="tada" />
```

**Best for:** Success messages, achievements, celebrations

### Rubber

Rubber band effect with elastic scaling.

```tsx theme={null}
<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

<Tabs>
  <Tab title="Fade In">
    ```tsx theme={null}
    <MotionIcon name="Star" entrance="fadeIn" />
    ```

    Simple opacity transition from 0 to 1.
  </Tab>

  <Tab title="Fade In Up">
    ```tsx theme={null}
    <MotionIcon name="ArrowUp" entrance="fadeInUp" />
    ```

    Fades in while moving up from below.
  </Tab>

  <Tab title="Fade In Down">
    ```tsx theme={null}
    <MotionIcon name="ArrowDown" entrance="fadeInDown" />
    ```

    Fades in while moving down from above.
  </Tab>

  <Tab title="Fade In Left">
    ```tsx theme={null}
    <MotionIcon name="ArrowLeft" entrance="fadeInLeft" />
    ```

    Fades in while moving from the left.
  </Tab>

  <Tab title="Fade In Right">
    ```tsx theme={null}
    <MotionIcon name="ArrowRight" entrance="fadeInRight" />
    ```

    Fades in while moving from the right.
  </Tab>
</Tabs>

### Scale Animations

```tsx theme={null}
<MotionIcon name="Plus" entrance="scaleIn" />
```

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

### Slide Animations

<Tabs>
  <Tab title="Slide In Up">
    ```tsx theme={null}
    <MotionIcon name="Upload" entrance="slideInUp" />
    ```

    Slides in from bottom without opacity change.
  </Tab>

  <Tab title="Slide In Down">
    ```tsx theme={null}
    <MotionIcon name="Download" entrance="slideInDown" />
    ```

    Slides in from top without opacity change.
  </Tab>
</Tabs>

### Special Effects

<Tabs>
  <Tab title="Rotate In">
    ```tsx theme={null}
    <MotionIcon name="RotateCw" entrance="rotateIn" />
    ```

    Rotates while fading in for a dynamic entrance.
  </Tab>

  <Tab title="Zoom In">
    ```tsx theme={null}
    <MotionIcon name="ZoomIn" entrance="zoomIn" />
    ```

    Combines scaling and fading for an impactful entrance.
  </Tab>
</Tabs>

## Combining Animations

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

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

## Animation Triggers

Control when animations play using the `trigger` prop:

<Tabs>
  <Tab title="Always (Default)">
    ```tsx theme={null}
    <MotionIcon name="Star" animation="pulse" trigger="always" />
    ```

    Animation plays continuously.
  </Tab>

  <Tab title="Hover">
    ```tsx theme={null}
    <MotionIcon name="Heart" animation="heartbeat" trigger="hover" />
    ```

    Animation plays only on hover.
  </Tab>

  <Tab title="Click">
    ```tsx theme={null}
    <MotionIcon name="Bell" animation="shake" trigger="click" />
    ```

    Animation plays on each click.
  </Tab>

  <Tab title="Focus">
    ```tsx theme={null}
    <MotionIcon name="Search" animation="pulse" trigger="focus" />
    ```

    Animation plays when focused (useful for interactive elements).
  </Tab>
</Tabs>

## Customizing Animation Timing

Fine-tune your animations with timing controls:

```tsx theme={null}
<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

<Note>
  **Pro tip:** Use subtle animations like `pulse` for continuous effects and save dramatic animations like `tada` for special moments like success states.
</Note>