# AnimationConfig

> _Since v0.2.7_

Grid-wide animation configuration.
Controls global animation behavior - individual plugins define their own animation styles.
Duration and easing values set corresponding CSS variables on the grid element.

#### Example

```typescript
// Enable animations regardless of system preferences
grid.gridConfig = {
  animation: {
    mode: 'on',
    duration: 300,
    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
  },
};

// Disable all animations
grid.gridConfig = {
  animation: { mode: 'off' },
};

// Respect user's reduced-motion preference (default)
grid.gridConfig = {
  animation: { mode: 'reduced-motion' },
};
```

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `mode?` | <code><a href="/grid/api/core/types/animationmode/">AnimationMode</a></code> | Global animation mode. |
| `duration?` | <code>number</code> | Default animation duration in milliseconds. Sets `--tbw-animation-duration` CSS variable. |
| `easing?` | <code>string</code> | Default easing function. Sets `--tbw-animation-easing` CSS variable. |

### Property Details

#### mode

**Default:** `'reduced-motion'`

---

#### duration

**Default:** `200`

---

#### easing

**Default:** `'ease-out'`

---

## See Also

- [`AnimationMode`](/grid/api/core/types/animationmode.md) for mode options