Motion can show that an action was received or clarify the relationship between two interface states. Begin with the information it conveys. Remove animation that delays a repeated task or distracts from the content people need to use.

Explain a change

Keep the direction and timing of a transition consistent with the interaction. A temporary view should have an understandable entrance and exit; a progress state should remain distinguishable from completion. Do not delay data updates solely to match an animation.

Prefer a component's shipped feedback before adding another effect around it. Additional scale, blur, or translation can compete with the control's own behavior. Review frequent interactions as a sequence, not only as an isolated demonstration.

Choose the correct implementation layer

The low-level package exports stepSpring, isSettled, createScheduler, and getSharedScheduler. The React entry is separate. These APIs do not make arbitrary React layout changes animate automatically and are not equivalents of every SwiftUI animation modifier.

Relate timing tokens

The installed duration scale includes --lq-duration-instant, --lq-duration-fast, --lq-duration-quick, and --lq-duration-standard. The fast, quick, and standard values are 120ms, 150ms, and 250ms. Easing tokens include --lq-easing-standard, --lq-easing-accelerate, and --lq-easing-decelerate.

Duration describes how long a CSS transition runs; easing describes its progress through that time. A numerical spring instead evolves according to its parameters. Do not treat a duration token as a universal spring duration or a performance guarantee.

For an application-owned disclosure marker, a scoped rule can connect its state to a brief transition:

.disclosure-marker {
  transition: transform var(--lq-duration-fast) var(--lq-easing-standard);
}

.disclosure-marker[data-expanded="true"] {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .disclosure-marker {
    transition: none;
  }
}

The application still supplies the expanded state and accessible disclosure control. This rule changes only the marker's presentation. Load the Liquidify aggregate stylesheet to provide the tokens.

Respect reduced motion

The installed Button CSS removes transitions, loading-spinner animation, and its activation pop when reduced motion is requested. The glass engine reads prefers-reduced-motion when selecting rendering behavior, and the morph controller completes state changes without interpolation when that preference is active.

These are scoped behaviors, not a global switch for all page animation. Custom CSS, media, and calls to the low-level scheduler need their own handling. Keep a useful static state and explicit text for progress or results; a stationary loading indicator still needs to communicate waiting.

Review interruptions and recovery

Test repeated activation, rapid open and close requests, and navigation away during an operation. The application should remain understandable when motion is reduced or a transition ends immediately. Keep saving, cancellation, and error handling independent of visual completion.

Related implementation

• Motion package
• Motion tokens
• Button and Dialog

Further reading

• Apple: Motion
• Apple: Accessibility