Live demonstration

rule.motion.purpose-first

list-change

ads-motion-list · dur-base

list-change

Allowed

tables
kanban
notification feeds

Prohibited

animating every keystroke in filters

Performance

Limit concurrent FLIP animations

Reduced motion

Instant reflow

@media (min-width: 68rem) { html .shell[data-sidebar-state="collapsed"] { grid-template-columns: var(--docs-rail) minmax(0, 1fr); } html .shell[data-sidebar-state="collapsed"] .sidebar { padding: var(--space-6) var(--space-5); } html .shell[data-sidebar-state="collapsed"] .rail-heading { flex-direction: row; } html .shell[data-sidebar-state="collapsed"] .brand-lockup > span:last-child { display: flex; } html .shell[data-sidebar-state="collapsed"] .desktop-navigation { display: block; } html .shell[data-sidebar-state="collapsed"] .rail-utilities--desktop { display: flex; } html .shell[data-sidebar-state="collapsed"] .sidebar-toggle { display: none; } }