Row Animation

What the option covers

animateRows governs the brief enter transition applied to content a toggle reveals — the detail panel above is the one you can drive on this page. It is a single grid-level switch rather than a per-surface one, so everything that appears on expand shares one motion language instead of drifting apart as the grid grows.

It is on by default. Turning it off is one line, and it changes nothing else: the same content appears in the same place, just without the transition.

Collapse is always instant

Only the reveal is animated. Closing a panel removes it immediately, whatever the option is set to — waiting for content to fade out before the row settles reads as lag rather than polish, and it makes rapid open/close feel unresponsive. Try it above with the switch on: opening moves, closing does not.

Reduced motion is respected automatically

If the reader's system asks for reduced motion, the transition does not run — regardless of what you set. You do not have to detect the preference or pass anything: leaving animateRows at its default is already the accessible choice, and setting it to false is about your product's feel rather than about accessibility.

That means the two settings differ only for readers who have not asked for reduced motion. If you are testing and see no animation at all, check the system preference before checking the config.

What is not animated

Sorting, filtering, paging and scrolling all repaint without motion. Rows do not slide when the order changes, and scrolling never animates — at scale that would be the difference between a grid that keeps up with the scrollbar and one that does not. What you get instead is an instant repaint and a stable frame rate.

For drawing attention to values that changed rather than content that appeared, see Live Updates, which briefly highlights the cells a transaction touched. The two are separate options and can be used together.

Turning it off everywhere

Set it once in your application config instead of on each grid:

// app.config.ts
providers: [
  provideGridDefaults({ animateRows: false }),
]

A single grid can still opt back in with config.animateRows: true. See Global Configuration for how the two levels combine.