Motion System: Atlassian Design System

Category: Developer Tools / Productivity Purposeful, friction-reducing motion that helps teams think — not a showcase, but a guide.

Motion Philosophy

Atlassian products are where work happens at scale: Jira boards tracking hundreds of issues, Confluence spaces holding institutional knowledge, Trello cards moving through complex workflows. Users arrive with a job to do, and the interface should help them finish it. Motion's role is cognitive, not emotional — it communicates structure, confirms operations, and orients the user within a complex information space. An animation that draws attention to itself has failed.

The unifying principle across Jira, Confluence, and Trello is that motion should reduce cognitive load, not add to it. This means transitions are medium-paced — fast enough to feel immediate, slow enough to communicate directionality. When a card moves from one column to another on a Jira board, the transition must be clear and spatially honest: the card traveled in the direction the user expects. When a drawer opens in Confluence, it should confirm the user's action without demanding they watch the animation complete before clicking again.

There is a deliberate split in the motion register between different products. Trello has a somewhat more playful quality — the board metaphor invites a physical feel for card manipulation, and drag-and-drop interactions use spring physics to communicate the weight of items. Jira and Confluence are more restrained, befitting a developer audience that values predictability. The design system provides consistent timing tokens and easing curves that all products share, with product-level variation happening primarily in spring physics usage.

Duration Scale

Easing

The Atlassian ease-in-out is asymmetric — the initial acceleration is faster than Material's standard. This gives transitions a more decisive start, which reads as responsive on the developer-tool context where users are performing rapid sequential actions.

Spring Configs (Framer Motion)

Spring physics are used selectively in Atlassian products, primarily for interactive drag-and-drop in Trello and Jira boards, and for panels in Confluence.

• Board card settle (Trello/Jira drag-and-drop): stiffness: 300, damping: 30, mass: 1 — slight overshoot acceptable, communicates card weight
• Drawer/panel (Confluence side panel, Jira detail view): stiffness: 250, damping: 32, mass: 1 — settles without overshoot
• Snappy (toolbar tooltips, flag notifications): stiffness: 500, damping: 40, mass: 0.8 — resolves quickly, no overshoot
• Drag ghost (card being actively dragged): stiffness: 0 — follows cursor exactly with no physics. Spring only fires on release.

Stagger Patterns

• Board columns on initial load: 40ms between each column, entering from left to right
• Cards within a column (first render): 25ms between each card, capped at 6 cards
• Search results: 20ms between each result item
• Notification flags: 30ms between stacked notifications
• Sidebar navigation items: no stagger — all items appear simultaneously at duration-entering
• Jira roadmap items: 16ms between rows on initial load, capped at 12 rows

Stagger is never applied during scroll, reorder, or real-time data updates — only on initial mount or after a significant context change such as a filter or search.

Enter / Exit Patterns

Fade + Slide (dropdowns, popovers, tooltips)

enter: opacity 0→1, translateY 4px→0, duration: duration-entering (200ms), ease: ease-in-out
exit: opacity 1→0, translateY 0→-2px, duration: duration-exiting (150ms), ease: ease-out

Panel Slide (Jira issue detail, Confluence side panel)

enter: translateX 100%→0, duration: duration-moving (350ms), ease: ease-in-out
exit: translateX 0→100%, duration: duration-moving (350ms) × 0.7 = 245ms, ease: ease-out

Modal (dialogs, confirmations)

enter: opacity 0→1, scale 0.97→1, duration: duration-entering (200ms), ease: ease-in-out
backdrop: opacity 0→0.54, duration: duration-entering (200ms), ease: ease-out
exit: opacity 1→0, scale 1→0.97, duration: duration-exiting (150ms), ease: ease-out

Board Card (Trello / Jira board drag settle)

drag: follows pointer at 0ms (no easing while held), opacity drops to 0.85, shadow elevation increases
settle: spring: Board card settle config — card snaps to drop target position, slight overshoot then rests
cancel (return to origin): spring: Board card settle config, back to original position

Accordion / Inline Expand (Confluence page sections, Jira subtasks)

open: height 0→auto via max-height, duration: duration-moving (350ms), ease: ease-in-out
close: height auto→0, duration: duration-exiting × 1.5 = 225ms, ease: ease-out
chevron rotation: 0deg→90deg, duration: duration-entering (200ms), ease: ease-in-out, synced with open

Flag / Notification (top-right toast)

enter: translateX 100%→0, opacity 0→1, duration: duration-entering (200ms), ease: ease-in-out
exit: opacity 1→0, translateX 0→20px, duration: duration-exiting (150ms), ease: ease-out
stack shift: existing flags translateY to accommodate new flag, duration: duration-entering (200ms)

Interaction States

• Hover: Background fill transition at duration-exiting (150ms) ease-in-out. Interactive elements in Jira and Confluence use a subtle background tint shift — no scale, no shadow change on non-card elements. Trello card hover adds a subtle shadow and slight brightness increase over 150ms.
• Press/Active: Background color steps down one shade at 0ms. No transform scale on list items or navigation. Buttons use a 50ms linear background darken.
• Focus: Focus ring appears at duration-exiting (150ms) ease-in-out. Uses the Atlassian blue #0C66E4 at 2px with 2px offset. In high-contrast mode, 0ms no transition.
• Drag in progress: Drag ghost follows cursor at 0ms with no easing. Source item shows a dashed border placeholder with background muted. Drop targets highlight with a 2px blue bar that fades in at duration-entering (200ms).
• Loading: Skeleton screens use a gradient shimmer at 1500ms linear infinite. Inline spinners are the Atlassian spinner mark, 1000ms linear rotation. Progress bars use linear easing only.
• Real-time updates (Jira live refresh): New or changed data items perform a brief opacity pulse — 0.6→1 over 300ms ease-out — to signal the update without causing layout disruption.
• Reduced motion: All translate and scale transforms removed. Transitions become opacity fades at 100ms. Drag-and-drop works without animation. Spring physics disabled — elements snap to target positions.

Rules

• Motion must have a job. Every transition should answer a question the user has: "Did that action register?" "Where did that element come from?" "Did the save complete?" Decoration is not a valid answer.
• Drag-and-drop interactions on Jira and Trello boards are the highest-fidelity motion in the system. They use spring physics precisely because users are manipulating items they conceptually own. The physics must communicate agency — cards feel like objects the user is moving, not UI elements being transitioned.
• Stagger only on initial paint. Data updates in real-time collaborative tools should not trigger stagger animations — when a colleague moves a card, it should animate naturally, not restart an entry sequence.
• Always implement prefers-reduced-motion. Transforms are removed, durations collapse to 0–100ms, springs snap to target, shimmer animations stop. The product must remain fully usable and spatially legible without motion.