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.

• Model: page light source
• CSS: opacity, color, box-shadow, filter: dropshadow()
• Tokens: N/A
• Accessibility:
  • No blinking effects. This can be harmful to some users.
  • Learn more about Motion & Accessibility.
• Dev Tip:
  • Use color and drop shadow changes sparingly; decreases performance
  • Don’t use acceleration (easing) for this motion.

Direction

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

• 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.

Speed

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

• 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.

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.

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

• Transition type: ease-out if moving into view, ease-in if moving out of view, ease-none if fading in or out

• Metaphor: position & rotation changes ease-in and ease-out, color & opacity changes ease-none, and computers & robotic things ease-none.

• Emphasis: exaggerate anticipation with ease-under, exaggerate end with ease-over

• 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.