Skip to content

Motion

Motion adds animation to a web interface, from a small fade to a change in layout.

Visit Motion

What does Motion add to a screen?

Motion gives you ways to animate elements and changes between states. Its React guide uses the motion package and requires React 18.2 or later. There are separate guides for JavaScript and Vue. If you want a ready-made control, Motion Primitives is a separate collection that uses Motion in its React components.

Can someone use the screen with less motion?

For React, configure Motion to follow the visitor’s reduced-motion setting. The documented setting stops layout and transform animations while allowing effects such as fades. Check scrolling effects and video separately, and make sure the action is understandable without animation. The core package is MIT-licensed. Motion+ offers separate paid components and resources.

Does a fictional order still make sense without movement?

Draw an order summary that expands to show a delivery estimate.

  1. Show the same information both ways
    Sketch the normal transition and a reduced-motion version. Keep the same button, estimate and expanded state in both.
  2. Check what the animation was doing
    Write what the visitor learns from the transition. Give that information a visible label or state if the movement was its only cue.