Kinetics System

Designing Component Motion

Kinetics System

How to Make Your Custom Components Move

Lightning components will come with Kinetics built right into it in the near future, but sometimes you’ll find the need to customize these components or create entirely new ones.

Adding motion to a component is like designing a small-scale transition. But there are some specific states to consider when you design your motion. A component can have one or more targets that respond or move to hover, active, focus, and selected states.

Hover

Pointer positioned over target. Defined by :hover pseudo-selector in CSS.

Points:

  • Two kinds of hovers: feedback and reveal.

Do:

As a user hovers over a button or icon, the background color changes to blue.
  • Reveal hover:
    • Shows more UI related to the target element
    • Must be touchscreen accessible, typically via long press.
    • Must be keyboard accessible, typically when focused with Tab key.
  • Best for small components like buttons, and not larger ones like cards.
  • For components with multiple hover targets
As a user hovers over a tooltip icon, a pop-over is revealed.

Don't:

  • Don’t complicate this motion. Should appear noncommittal; a small step toward a bigger action. Use only parallel sequencing.
  • Don’t have hover targets that shift under the cursor, i.e., elements that nudge to the side as if they’re trying to avoid being clicked.

Hover Patterns:

Scale

  • Best for components with visible containers
  • Be careful scaling text. Doesn’t look good on some browsers.
On hover, an icon scales to a larger size.

Spotlight

  • Best for components with 1:1 aspect ratios
  • Be careful scaling text. Doesn’t look good on some browsers.
  • Be mindful of proximity to other elements: spotlight could get too close.
On hover, a blue spotlight appears behind an icon.

Mouse-aware underline

  • Best for interactive components that contain text
On hover, a tab item is underlined. The underline animates from the cursor position.

Focus

Target ready for activation. Defined by :focus pseudo-selector in CSS.

Points:

  • Tells non-pointer users where they are on the screen.
  • Focus state immediately follows active state.
  • Must be keyboard accessible, typically by using tab and arrow keys.
  • Beware of animating the focus state. Might make the experience feel slow. Test motion in rapid succession.

Patterns:

  • A focus state animates on click. Use a quick fade to ensure the focus animation plays fluidly with the rest of the component animation. This affects the perceived latency of the interaction.
As a cursor hovers over three radio buttons, selecting them one at a time.
When a cursor clicks on a neutral button, bounce and ripple animations play with a focus ring appearing around the button.

Active

Target activated by pointer or keyboard. Defined by :active pseudo-selector in CSS.

Points:

  • Assures user that action will be taken.
  • Completes Kinetics quality of fluidity.
  • Complements hover. Should appear to complete the motion started by hover.
  • To enable on touchscreens, create an empty event handler for ontouchstart. (Learn more about Motion & Mobile Devices & Implementing Motion).
  • Must be keyboard accessible, typically via spacebar or Enter. (Learn more about Motion & Accessinility)

Patterns

  • Bounce (scale)
  • Mouse-aware fill
  • Border swirl
  • Ripple
An icon of a thumbs up is clicked, and the background of the icon fills with blue, animating from the location of the mouse.
An icon of a downward facing arrow is clicked, and a blue ripple animates from the location of the mouse.

Selected

Target selected among other like targets. Usually denoted by slds-is-active class (not to be confused with :active pseudo-selector).

Points:

  • Take spatial cues from the visual design. Understand the “micro spatial models” implied by bars and fills. Are these meant to be foreground or background elements? Animate accordingly.

Patterns

  • Background scale
  • Border swirl

Examples:

  • Vertical Navigation
  • Radio Button Group
As a cursor hovers over three radio buttons, selecting them one at a time.
As a cursor hovers over a Vertical Navigation, clicking on various items.