Motion

Choose by state change

Use motion only when it helps a reader connect a cause to a result. Direct input feedback should feel immediate, nearby floating content may take slightly longer to establish context, and a task-context change can use the slowest entrance. Do not animate content that has not changed.

Duration and easing

Use standard for two-way state changes, easeOut for content entering the interface, and linear only for a repeating cycle.

Treat loading as a cycle

loading is 2.4s, not an entrance duration. Use the linear cycle only for indeterminate progress such as a spinner or skeleton. Name the task when it matters, stop the cycle when work finishes, and show determinate progress when it is available.

Use real interaction patterns

Flutter touch and stylus targets begin pressed feedback on pointer down. The color enters with immediate and easeOut, then returns with fast and standard. A short tap still activates on release without a minimum display time; scrolling or cancellation restores the prior state without activation.

• Buttons, toggles, tabs, and switches use fast feedback for a local state change.
• Menus, tooltips, popovers, and selection lists establish nearby context.
• Dialogs and drawers may use slower entry because they change the active task context.
• Progress and skeleton indicators use the loading cycle while work remains indeterminate.

Reduce motion without removing meaning

prefers-reduced-motion: reduce should remove decorative travel and large transforms while keeping the final state, status text, focus movement, and semantic feedback intact.

Implementation and reference

.rack-status { transition: background-color var(--tinyrack-duration-fast) var(--tinyrack-ease-standard); }
@media (prefers-reduced-motion: reduce) { .rack-panel { transition: none; transform: none; } }