# ResponsiveAnimation

> _Since v3.7.0_

How the switch between table and card layout is animated.

- `false` — no animation; the layout swaps instantly.
- `'fade'` — cross-fade the grid as a whole.
- `'morph-rows'` — travel each row from its table position to its card position.
- `'morph-cells'` — travel each cell from its column to its stacked position in
  the card. Falls back to `'morph-rows'` above 150 rendered cells.

The morph styles require element-scoped view transitions
(`Element.startViewTransition()`); browsers without support fall back to the
CSS keyframe fade.

```ts
type ResponsiveAnimation = false | "fade" | "morph-rows" | "morph-cells"
```

## See Also

- [`ExpandCollapseAnimation`](https://toolboxjs.com/grid/api/core/types/expandcollapseanimation.md) for the expand/collapse equivalent