Motion System: Salesforce Lightning Design System

Category: Enterprise CRM / Business Software Restrained, trustworthy motion that defers to data — animation serves clarity, never spectacle.

Motion Philosophy

Salesforce Lightning exists in the context of business-critical work: sales pipelines worth millions of dollars, customer records tied to real relationships, service queues where delay costs money. Motion in this environment carries a different weight than in consumer products. An animation that feels playful in a social app feels unprofessional in a CRM. Users are frequently under time pressure, and any motion that doesn't serve an immediate orientation or feedback purpose is friction.

The guiding principle is trustworthiness. Motion should make the user feel the system is in control and responding accurately. A button press should confirm instantly that the action registered. A record saving should communicate progress without anxiety. A panel opening should feel deliberate and ordered. The system achieves this through conservative timing, gentle easing curves, and a strict absence of spring physics or bounce — the interface behaves like precision software, not a physical toy.

Accessibility and compliance requirements shape the motion system at a deep level. Many Salesforce deployments are in regulated industries — financial services, healthcare, government. The motion system must meet WCAG 2.1 AA and respect user motion preferences with no exceptions. This means the system was designed from the start to degrade gracefully: every animation has a defined instant fallback, and no product feature depends on a transition completing.

Duration Scale

Durations above 400ms are not used in the Lightning component library. Animation is never allowed to become a wait.

Easing

No custom or exotic curves. The Lightning easing vocabulary is intentionally minimal and matches Material Design's standard tokens for interoperability. There are no spring curves — all easing is defined as cubic Bézier for deterministic, reproducible behavior across browsers.

Spring Configs (Framer Motion)

Salesforce Lightning does not use spring physics in its standard component library. Springs are explicitly avoided because non-deterministic motion is harder to test, can overshoot target positions, and may feel frivolous in enterprise contexts.

Where Framer Motion is used in AppExchange applications or custom experiences built on the Lightning platform, the following configs are recommended to simulate the character of CSS-eased transitions:

• Panel (modal, drawer): stiffness: 280, damping: 40, mass: 1 — critically damped, no overshoot
• Control (toggles, segmented selectors): stiffness: 400, damping: 50, mass: 0.8 — resolves quickly
• Strict reduced-motion: stiffness: 2000, damping: 200, mass: 1 — resolves immediately

Never use stiffness/damping ratios that produce overshoot (damping < 2√stiffness is prohibited in this system).

Stagger Patterns

• List rows (data table initial load): 12ms between each row, capped at 10 rows
• Related record tiles: 20ms between each tile
• Activity timeline items: 16ms between each item
• Notification toasts: 30ms between each toast when multiple appear
• Form field groups: no stagger — all fields appear simultaneously to avoid perceived delay in form loading

Stagger is applied only on first render. Subsequent data refreshes replace content without stagger to avoid making the interface feel unstable.

Enter / Exit Patterns

Fade (toast notifications, validation messages)

enter: opacity 0→1, duration: duration-quickly (100ms), ease: ease-out
exit: opacity 1→0, duration: duration-quickly (100ms), ease: ease-in

Fade + Slide (dropdowns, tooltips, small menus)

enter: opacity 0→1, translateY 4px→0, duration: duration-promptly (200ms), ease: ease-out
exit: opacity 1→0, duration: duration-quickly (100ms), ease: ease-in

Panel Slide (record detail drawer, utility panel)

enter: translateX 100%→0, duration: duration-slowly (300ms), ease: ease-out
exit: translateX 0→100%, duration: duration-promptly (200ms), ease: ease-in

Modal (dialogs, confirmation modals)

enter: opacity 0→1, translateY 8px→0, duration: duration-slowly (300ms), ease: ease-out
backdrop: opacity 0→0.5, duration: duration-slowly (300ms), ease: linear
exit: opacity 1→0, duration: duration-promptly (200ms), ease: ease-in
backdrop exit: opacity 0.5→0, duration: duration-promptly (200ms), ease: linear

Accordion / Expandable Section

open: max-height 0→content-height, duration: duration-slowly (300ms), ease: ease-in-out
close: max-height content-height→0, duration: duration-promptly (200ms), ease: ease-in-out

Interaction States

• Hover: Background fill at duration-quickly (100ms) ease-out. Border color changes simultaneously. No scale, no shadow change. The hover state communicates interactivity without implying physical depth.
• Press/Active: Background darkens by one step on the color scale at 0ms — instant. Salesforce does not use transform-based press states; color change alone confirms the press.
• Focus: Focus ring appears at duration-quickly (100ms) ease-out. In high-contrast mode, 0ms with no transition. The focus ring is always 2px solid and uses the brand blue — it must never be subtle.
• Drag (Kanban board, list reorder): Dragged card gains a subtle box-shadow at duration-quickly (100ms). Drop targets show a 2px accent line placeholder. No scale transform — the card reads as "lifted" through shadow, not size.
• Loading: Spinner is the Lightning circular indicator, 1000ms linear rotation. Skeleton loaders use a CSS linear gradient shimmer at 1800ms linear infinite. Progress bars are linear easing only.
• Error state: Error border and icon appear at 0ms with no transition — errors must never be subtle or animated in. Error messages fade in at duration-quickly (100ms).

Rules

• Respect prefers-reduced-motion. When active, all transitions are reduced to 0ms opacity changes only. Spinners and shimmer animations are replaced with static indicators.
• Never use spring physics, bounce, or overshoot in standard product components. Underdamped motion implies imprecision, which is antithetical to trust in a data-critical tool.
• Motion must not delay access to information. A record's data should be visible as fast as the network allows — animation is painted on top of loaded content, never used to mask loading delays.
• All animations must have defined, instantaneous fallbacks. No product feature may depend on an animation completing before the user can interact.