Motion should have a purpose

Animation is most useful when it explains something: where an item went, what changed, or which action just succeeded. Before adding movement, give it a job.

Start with the change

A card expanding into a detail view has a clear relationship to communicate. Keeping its position and shape connected helps the reader follow that transition. A decorative loop beside a paragraph has a harder job to justify.

Ask three questions before reaching for an animation library:

• What changed on screen?
• Does movement make that change easier to understand?
• Can the same information remain available without movement?

Keep the interface responsive

Feedback should begin as soon as someone interacts. A button can acknowledge a press immediately while a longer operation continues. Avoid making people wait for an entrance animation before they can read or click.

Scroll effects deserve the same care. Tie their progress to scrolling, keep travel distances restrained, and make sure the final layout still makes sense on a small screen.

Respect reduced motion

Reduced motion is a design constraint, just like a narrow viewport. Preserve the content and remove unnecessary travel.

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

The goal is an interface that feels attentive. Sometimes a small color change communicates everything needed.