Animations
TreeKit animates state transitions, never layout you're waiting on.
Engineering
Frontend
Backend
Platform
Design
Marketing
Show code
<TreeKit data={data} disableAnimations={disableAnimations} />What's animated, deliberately, is limited to short, low-cost transitions:
- The chevron rotates on expand/collapse.
- Hover and selected background colors transition instead of snapping.
- The async-loading spinner rotates continuously while a fetch is pending.
TreeKit intentionally does not animate a node's expanded height (the classic "accordion slide"). That effect requires measuring content height on every expand, which fights directly with the flat, virtualization-friendly row list TreeKit renders for large trees — see Large Trees. If you need it for a specific tree, it's straightforward to add with a CSS grid-template-rows transition on your own renderNode wrapper, at the cost of that tree's virtualization-friendliness.
| Prop | Type | Default | Description |
|---|---|---|---|
| disableAnimations | boolean | false | Forces every transition/animation off, regardless of OS motion settings. |
prefers-reduced-motion is automatic
You don't need
disableAnimations just to respect accessibility preferences — TreeKit's stylesheet already includes a @media (prefers-reduced-motion: reduce) block that disables all transitions and animations for users who've asked their OS for less motion. disableAnimations is for when you want animations off unconditionally (e.g. in a test environment, or a data-dense dashboard).