Motion System: Stripe

Category: Payments / Financial Infrastructure Deliberate, calm, and trustworthy — motion that communicates certainty, never surprise.

Motion Philosophy

Stripe's motion is in service of trust. Payments involve money and personal data; users are primed to look for signals that things are working correctly and safely. Animation that is too fast feels like it skipped a step. Animation that is surprising — a bounce, an overshoot, an unexpected entrance — reads as instability. Every motion decision is filtered through the question: does this make the user feel more confident, or less?

The pace is intentionally moderate. Where Linear optimizes for speed, Stripe optimizes for legibility. A modal takes 280ms to appear — long enough that the user registers it as a deliberate presentation, not a flicker. Number transitions in dashboards use a counting animation that lets users actually see the value changing, reinforcing that real computation happened. Easing is always a smooth cubic-bezier; there are no springs in financial UI. Springs imply physics, and physics implies the system is still settling. Stripe's UI arrives, and it is done.

Marketing and documentation surfaces (stripe.com, the Docs) use a richer motion palette: scroll-driven gradient animations, parallax on product screenshots, staggered section reveals. These are appropriate because the context is exploratory, not transactional. The rule of thumb: in checkout, in the Dashboard, in the CLI output pane — calm and minimal. On the marketing site — more expressive, but still never chaotic.

Duration Scale

Easing

No spring easing is used in Dashboard or Checkout. Springs are reserved for marketing-site interactive demos where a physical feel is intentional and decorative.

Spring Configs (Framer Motion — marketing site only)

• Default: stiffness: 120, damping: 20, mass: 1
• Gentle: stiffness: 80, damping: 18, mass: 1.2
• Hero elements: stiffness: 60, damping: 15, mass: 1.5

These values are intentionally soft — on the marketing site, motion can breathe. They must not be imported into Dashboard or Checkout components.

Stagger Patterns

• Dashboard metric cards: 60ms between each card
• List rows (invoices, payments): 40ms between each row, only on initial page load
• Form fields appearing: 50ms between each field group
• Marketing feature grid: 80ms between each item, triggered on scroll into view
• Nav items in mobile menu: 30ms between each item

Enter / Exit Patterns

Fade + Slide (default — modals, panels, alerts)

enter: opacity 0→1, translateY 12px→0, duration: default (280ms), ease: ease-out
exit: opacity 1→0, translateY 0→-8px, duration: fast (150ms), ease: ease-in

Scale Pop (dropdowns, tooltips, popovers)

enter: opacity 0→1, scale 0.96→1, duration: fast (150ms), ease: ease-out
exit: opacity 1→0, scale 1→0.96, duration: fast (150ms), ease: ease-in

Slide (right-side detail panels, filter drawers)

enter: translateX 100%→0, duration: default (280ms), ease: ease-out
exit: translateX 0→100%, duration: default (280ms), ease: ease-in

Number Counter (revenue figures, metric readouts)

value animates from previous to new over slow (400ms), ease: ease-in-out
uses requestAnimationFrame loop, not CSS transition
formats intermediate values with same locale/currency formatter as final value

Alert / Toast Banner

enter: translateY -100%→0 (top banners) or translateY 100%→0 (bottom toasts),
       duration: default (280ms), ease: ease-out
exit:  opacity 1→0, duration: fast (150ms), ease: ease-in (no slide-back on exit)

Interaction States

• Hover: Background color transition over 150ms ease-out. Buttons show a slight darkening of the background (not a scale). Links underline fades in. No transform on financial action buttons — scale would imply physical instability.
• Press/Active: Background darkens immediately (0ms) on mousedown, releases on mouseup. No scale transform on primary payment buttons. Secondary/ghost buttons may use scale(0.98) over 80ms.
• Focus: Focus ring transitions in over 100ms ease-out — a small but deliberate appearance to signal keyboard navigation without drawing eye away from content. Stripe uses a distinctive purple/indigo focus ring.
• Loading (payment processing): The submit button transitions its label to a spinner icon over 150ms fade. The button itself does not move or resize. A progress bar may appear above the form, advancing over 2000ms with ease-in-out — it never reaches 100% until the response is confirmed.
• Success state: Checkmark draws in with a stroke animation over 400ms ease-out. The surrounding container fades from processing color to success green over 300ms. This is one of the few moments Stripe allows a slightly expressive animation — because success is earned and should feel resolute.

Rules

• Never use springs or bouncy curves in Checkout, the Dashboard, or any surface where a user is completing a financial action. Trust is non-negotiable.
• Number animations must format correctly at every intermediate frame — a revenue figure animating from $9,400 to $12,800 should never display a string that looks like a broken value mid-animation.
• Respect prefers-reduced-motion: remove translateY/translateX transforms and collapse durations to 150ms max. Number counters snap to their final value instantly.
• Marketing motion is opt-in per component. A component built for the Dashboard must not inherit marketing-motion defaults. Keep the two motion contexts strictly separated at the module level.