Kinetics System

Making Things Move

The Controls That Set Things in Motion

Kinetics controls 4 things to make UI move: light, direction, speed, and acceleration. These controls need to be maintained within the requirements of Kinetics Personality, Design Transitions, and Designing Component Motion, in order to reflect Salesforce’s Kinetics identity throughout the UI interactions.

Light

Element lighting is typically animated through opacity, color, and drop shadow.

On-screen, a circle animates, changing from light to dark gray, casting a shadow behind it for a three-dimensional effect.
  • Model: page light source
  • CSS: opacity, color, box-shadow, filter: dropshadow()
  • Tokens: N/A
  • Accessibility:
  • Dev Tip:
    • Use color and drop shadow changes sparingly; decreases performance
    • Don’t use acceleration (easing) for this motion.
A settings button highlights on hover, and changes color after clicked.
The background color changes from grey to blue when user toggles a switch from disabled to enabled.

Direction

Elements typically move along the X, Y, or Z axis. Elements can also rotate around an axis, or follow a specific path.

On-screen, a circle enlarges and then decreases in size as three smaller circles rotate out from its center.
  • Model: spatial model
  • CSS: transform:translate(), transform:rotate(), transform:scale(), offset
  • Tokens: N/A
  • Accessibility:
    • Avoid repeated pulsing motions. These are harmful to some users.
    • Be careful with movements that traverse the entire screen or large perceived distances. They can be harmful to some users.
    • Be sure that the motion direction and interaction direction sync in a way that is intuitive to the viewer. Scrolljacking, parallax, and similar effects are harmful to some users.
    • Learn more about Motion & Accessibility.
  • Dev tip: use color and drop shadow changes sparingly as they can decrease performance.
An icon of a downward facing arrow is clicked, then a drop down menu with four items opens.
A cursor hovers over an icon of a small letter ‘i,' triggering a tooltip description bubble to pop up. This pop up disappears when the user hovers off.

Speed

Speed is the distance an element covers over a certain amount of time. You control speed by setting the duration of the motion.

Two circles move at different speeds across a screen, with motion duration set at 150 milliseconds and 250 milliseconds.
  • Model: size of element relative to viewport.
    • Smaller elements move faster. Speed Styling Hook of kx-duration-xshort, kx-duration-short
    • Medium elements move at a moderate or “normal” speed. Speed Styling Hook of kx-duration-normal
    • Larger elements move slower. Speed Styling Hook of kx-duration-xlong, kx-duration-long*
  • CSS: transition, animation. See implementation guidelines.
  • Tokens: N/A
  • Accessibility:
    • Be sure that the motion speed and interaction speed are intuitively matched. Scrolljacking, parallax, and similar effects are harmful to some users.
    • Learn more about Motion & Accessibility.
  • Duration Styling Hooks
    • Note: Use these values as a reference to build your animations. These values will be available as styling hooks in the future.
--kx-duration-xshort75ms
--kx-duration-short150ms
--kx-duration-normal250ms
--kx-duration-long400ms
--kx-duration-xlong600ms

A cursor hovers over a small icon of a thumbs up and clicks it.
Small sized elements: Icons
Speed Token : kx-duration-short

A cursor selects different items on a vertical navigation.
Medium sized elements: Vertical navigation
Speed Token : kx-duration-normal

A panel animates in from the right, then expands to become larger before returning to its previous size.
Large sized elements: Panels
Speed Token : kx-duration-long

Acceleration

For movement to look natural, elements should gradually come up to speed, then gradually come to rest. This is called “easing” in most motion design tools.

A display of ease curve animation on a circle

Choosing the right kind of easing is about relating the element to a natural object or phenomenon. Moving objects noticeably accelerate, then decelerate. However, changes in color or opacity (similar to a sunrise/sunset or dimmer switch) won’t have a perceptible acceleration, so it usually looks better not to ease them. And if you’re actually trying to make the motion more machine-like, acceleration/deceleration will be irrelevant

  • Model: combination of trigger, transition type, element size, emphasis.
  • Trigger: ease-out if user-triggered, ease-in-out if system-triggered
A default toast message fades in from the top, settles for a bit, then moves downwards and fades out.
  • Transition type: ease-out if moving into view, ease-in if moving out of view, ease-none if fading in or out
A popover using ease-out while moving into view and ease-in when moving out of view.
  • Metaphor: position & rotation changes ease-in and ease-out, color & opacity changes ease-none, and computers & robotic things ease-none.
A cursor hovers over various icons triggering unique animations for each icon.
  • Emphasis: exaggerate anticipation with ease-under, exaggerate end with ease-over
A yellow Warning Toast using an ease-over for exaggeration as it fades in from above.
A Progress Ring fills with green around its perimeter before a white checkmark animates inside and green rays radiate outwards.
  • CSS: cubic-bezier() in transition, animation.
  • Accessibility:
    • Be sure that the motion acceleration and interaction acceleration are intuitively matched. Scroll jacking, parallax, and similar effects are harmful to some users.
    • Learn more about Motion & Accessibility.
  • Acceleration Styling Hooks
    • Note: Use these values as a reference to build your animations. These values will be available as styling hooks in the future.
--kx-ease-nonecubic-bezier(0, 0, 1, 1)
--kx-ease-incubic-bezier(0.3, 0, 1, 0.3)
--kx-ease-outcubic-bezier(0, 0.3, 0.15, 1)
--kx-ease-in-outcubic-bezier(0.3, 0, 0.15, 1)
--kx-ease-undercubic-bezier(0.7, 0, 0.7, -0.75
--kx-ease-overcubic-bezier(0.3, 1.75, 0.3, 1)
--kx-ease-under-overcubic-bezier(0.7, -0.4, 0.4, 1.4)