Motion

When used with intention, motion helps users understand what changed, why it changed, and what to do next. Our motion system provides a shared language of semantic and base motion tokens so that every transition feels consistent, purposeful, and aligned with the Atlassian brand.

Our motion system is guided by four key principles that ensure every animation serves a functional and brand purpose.

Motion reflects organic, human movement that is subtle, rhythmic, and intuitive. Experiences should feel warm and alive rather than mechanical.

Motion is a clarifying layer, not decoration. It is applied consistently to guide attention and make experiences feel coherent and trustworthy.

Motion aids comprehension without reducing comfort. Our system honours reduced-motion settings, providing clear low- or no-motion options.

Motion should be streamlined to reinforce a sense of speed and momentum. It should never add friction to how quickly teams get work done.

Every motion event is defined by three core attributes: duration, easing curve, and property.

Duration defines how long a motion event takes from start to finish.

Used for hover and press states. Short durations ensure the interface feels immediately responsive and polished.

Used for elements entering, exiting, or moving on screen (e.g. Modals, Panels). Longer durations help users track spatial changes. Larger elements generally require longer durations to feel proportional.

Easing curves control the acceleration and deceleration of motion, defining how a transition feels.

A motion property is the visual attribute that changes over time. Together with duration and easing, it defines how something moves or transforms on screen.

Motion semantic tokens are named bundles that encode context, motion type, and tempo. This allows designers and engineers to choose motion by intent rather than raw values. Use semantic tokens before reaching for base token options. For guidance on composing more customised motion, see Applying motion.

A token like motion.popup.enter packages the specific implementation details: Duration + Easing curve + Motion properties.

Think about how motion layers across the UI. Core components should use motion for clarity, while branded experiences can use richer, more expressive motion for human touch.

Before choosing a specific token, evaluate motion through these four lenses. Each helps you decide if motion is necessary, how much is appropriate, and what risks to mitigate.

Keep core UI components fast and subtle so motion reinforces state changes without competing for attention. Make feedback states slightly more expressive so the message lands clearly.

Keep small elements (hover states, micro-interactions) fast and understated. Allow larger elements (like Panel or Modal entrances) more time and expression.

Use motion to direct attention to a new element, provide feedback from an action, or reinforce a brand moment during onboarding or loading. Before adding motion ask, if I remove this, does the user lose information or context?

Match motion expression to how often it is seen. High-frequency interactions like hover states, button presses, and list items should use minimal, near-instant transitions that stay out of the way. Reserve longer, more expressive motion for low-frequency moments like onboarding, first-run experiences, or milestone celebrations. If someone will trigger this motion dozens of times a day, keep it under 150ms. If they see it once a session, you have room for more expression.

Start motion immediately on interactions to avoid perceptible lags. Make exit motion faster than entrances so dismissed elements don't block someone's workflow. If motion makes the interface feel slower without helping users understand context, shorten it or remove it.

Respect reduced motion settings. Currently, when reduced motion is active, motion is off and instant. Never use motion that flashes, rapidly oscillates, or sweeps large areas of the screen. Verify the interface remains fully usable with all motion disabled.

Keep motion warm, confident, and purposeful. Let it reflect the energy of teamwork without being distracting.

Save expressive, characterful motion for key brand moments, like onboarding experiences. Keep everyday UI motion efficient and focused, and let brand personality come through in restraint and polish rather than spectacle.