Design Transitions and Custom Motion

Learning Objectives

After completing this unit, you’ll be able to:

Define transition.
Explain key considerations for designing transitions.
Explain key considerations for designing custom motion.

One View to Another

Using Kinetics controls, you can design transitions, which occur anytime there's a change in the view state of a user interface (UI). Transitions can be as simple as a single component, like a menu panel entering the on-screen view, or as complex as a complete view change.

Key Considerations

When designing a transition, consider:

Space: The three-dimensional stage on which you choreograph elements.
Hierarchy: The relative importance of each element.
Emphasis: The elements that need to stand out or create specific visual appeal.
Latency: Elements that aren’t yet downloaded before the transition begins.
Fatigue: The frequency of transitions and whether it may bother users.

Space

Before you animate anything, it's key to know the layers of your app. This is the spatial model. This model tells you where elements live on and off-screen and the direction in which they enter and exit the view. For example, think about the layers in a composer—a tool you use to modify the pages of a UI.

Layers include a panel that fades in from the left of the page, elevated one level above, followed by two toasts and three notifications that fade in from the top of the page, elevated two levels above the standard page. This spatial model helps users orient themselves to state changes, building their spatial intuition for where features live throughout a system, like an app.

Components fade in from different levels to create a page layout.

Hierarchy

The way you sequence elements tells users about the importance of each element. For example, at one end of the spectrum, you can have everything enter at the same time. While at the other end, you can sequence them one at a time. For example, a progress indicator component on the left side of a screen tracks completed tasks. Once a user checks them complete, they animate from right to left, fading out as the new content fades in at the same time.

A progress indicator component tracks completed tasks.

Emphasis

Use emphasis to bring special focus to parts of the page that need immediate attention to:

Create urgency
Emphasize visual interest
Show analogy

Create Urgency

Use alerts, toasts, and notifications, like a red circled alert that animates on a notification bell at the top of a screen to alert users of available system updates. Note that it’s key to ensure the motion is still functional to avoid purely decorative or poorly designed motion that does not create an accessible experience for all users, including those with vestibular issues.

A red circle alert animates on a notification bell.

Emphasize Visual Interest

Use celebrations like a progress ring that fills with green and then emphasizes success with an animation of a white checkmark and green radial burst when a user completes a task.

A progress ring triggers a success animation.

Show Analogy

You can also use celebration animations to compare and differentiate main actions from supporting actions. For example, use a charismatic success animation to distinguish between the main action of celebrating a completed task from the nimble and sensible supporting action of checking off a task from a list.

A user clicks checkboxes for three separate tasks as a progress ring fills and performs a success animation.

Latency

Remember that some elements may take extra time to download when a transition begins. If these take a while to load, your transition needs nimble handling of how individual sections on a page load, including fading in new content and gradually increasing space for new content.

For example, include a stencil loader as new content fades in to populate a side panel as it animates in or a spinner that animates before disappearing to reveal more relevant information when a user clicks on a menu item within the panel. This ensures you align with the Salesforce Kinetics System best practice of using visual experiences to improve the perceived latency of pages.

A user navigates the content of a side panel.

Fatigue

Think about the context of the transition and whether it runs several times over within a short time frame. Would this annoy or bore users? If so, consider a more straightforward, alternate transition for subsequent runs or eliminate subsequent transitions altogether. For example, as a user opens a panel for the first time, three list items animate in staggered, one slightly after the other. When the user opens the panel again to show details about the filter settings, the items appear already loaded and do not repeat the staggered effect a second time.

A user opens and closes a side panel.

Using these key considerations, you can also design custom motion.

Custom Motion Design

You design custom motion for custom components—components that aren't available in your specific design system. Custom motion is also necessary when you create choreography between components-both standard and custom ones. To get started, consider how components and elements respond or move to hover, active, focus, and selected states.

State	What It Means	Example
Hover	Placing your cursor over a component, like a button or an icon—this state is only accessible using a mouse.	When you hover over a button or icon on a web page and the background color changes.
Focus	Using a mouse or keyboard control, usually the tab key, to see which elements are ready for activation	When you click or tab to a button on a web page and a focus ring appears around it.
Active	Activating a component using your cursor or keyboard—typically via the spacebar or Enter key—complements the motion initiated by the hover state.	When you use your cursor to click a button and bounce and ripple animations play in feedback.
Selected	Clicking on a component choice, like a button on a navigation menu, with your cursor to make a selection	When you click a menu button, and a dropdown appears displaying various navigation options.

Designing custom motion also includes thinking about the motion design patterns available within each state.

Hover

Design motion within the hover state so it provides feedback to users or reveals more components within a UI, such as pop-out messages. There are three options for motion design in the hover state: scale, spotlight, and mouse-aware underline.

Scale

A component or element enlarges when a user hovers over them with their cursor.

An icon scales to a larger size.

Spotlight

Background color appears behind a component or element when a user hovers over it with their cursor.

A blue spotlight appears behind an icon.

Mouse-Aware Underline

A line animates from the cursor position when a user hovers over a component or the elements within it.

A user underlines tab items, with the underline animating from the cursor position.

Focus

The hover state is only accessible via a cursor. This means it’s key to design motion so users with keyboard controls also receive feedback when they interact with a component.

Fade

Fade animation—when components or elements appear on screen at a gradual or sped-up pace, depending on context—is the option for Kinetics design in the focus state.

A user clicks on a neutral button, bounce and ripple animations play, and a focus ring appears around the button.

Active

The active state complements the motion started by the hover state. The four pattern options for custom motion design in the active state include the scale pattern and: mouse-aware fill, border swirl, and ripple.

Mouse-Aware Fill

The background of a component fills with color from under the mouse position when a user clicks on it.

On a click, the background of an icon fills with blue, animating from the mouse's location.

Border Swirl

A borderline forms around a component when a user clicks on it, providing decorative feedback.

On a click, an icon and a blue border animate from the cursor’s location, forming a border around the icon.

Ripple

A small wave animates when a user clicks on a component or element.

On a click, a blue circular burst effect spreads out from an icon button.

Selected

Design motion within the selected state by taking spatial cues from the visual design. For example, examine the smaller spatial models set up by larger components, such as a vertical navigation menu within a UI, and think about whether you intend for them to be foreground or background elements and animate accordingly using a scale and border swirl pattern options.

A user hovers over three radio buttons, selecting them one at a time, triggering border swirl animation.

Best Practices

There are associated best practices for each motion design pattern—some are clear actions to avoid, and some involve using caution with your design choices.