Kinetics System

Design Transitions

How to Move from One View to Another

Transitions are the most common motion you’ll deal with. A transition occurs anytime there’s a change to the state of the view. Transitions can be as simple as a single component entering the view, or as complex as a complete view change. Wherever there are two consecutive artboards in your design, there’s a transition.

Panel Transitions in Lightning

A user navigates through pages in a panel and clicks expand on an embedded video

When designing a transition, consider these things:
Space: The three-dimensional stage on which elements will be choreographed. This tells you where things live on and off screen, and the direction of motion.
Hierarchy: The relative importance of each element. This tells you how to sequence the elements.
Emphasis: The elements that really need to stand out or create visual appeal. This tells you about the quality of acceleration.
Latency: Elements that aren’t yet downloaded before the transition begins. This tells you if spinners or stencils will be part of the transition.
Fatigue: A transition will feel plodding if it’s too frequent. This tells you to consider a simpler alternate transition for subsequent runs.


Before you animate anything, you should understand how your composition is staged: the layers of your app. This is the spatial model. The model tells you where elements live on and off screen, and the direction in which they enter and exit the view. The model helps users orient themselves to state changes, building their spatial intuition for where features live throughout the app.

In the lightning design system the spatial model definitions consists of two types:

  • Components float on multiple levels
  • Components live on page level relative to a parent element on that page.

Multi-level components:
In Salesforce, lightning design systems components may exist on 4 levels higher than the standard page.
Components that live on their individual page levels will gravitate towards the center of the page when triggered, thus guiding users through a more holistically weighted experience and improving visual scan-ability of information

Level 1 : Docked Composer and Docked Utility bar

A spatial model showcasing a docked composer popping up on level 1, above the standard page.

Level 2: Panels

A spatial model showcasing a panel sliding in from the left on level 2, above the standard page.

Level 3: Toasts & Notifications

A spatial model showcasing a series of toasts and notifications animating in from the top on level 3, above the standard page.

Level 4:Modals

A spatial model showcasing a modal animating in on level 4, above the standard page.

Relative components:
Components that originate from a parent element will float elevated above the same page level as the parent element. These components will move in relation to the parent component when triggered

A spatial model showcasing two relative components animating in from the top of the page.


The way you sequence elements tells users about the importance of each element. At one end of the spectrum, you can have everything enter at the same time. while at the other, they can be sequenced one at a time.

No Hierarchy: Parallel Sequencing

Use parallel sequencing to show a direct relationship between elements.

Synchronizing progress indicator with directional modal

As progress is tracked in a progress indicator on the left, the content on the right animates to the left, previous content fading out as the new content fades in.

Moderate Hierarchy: Staggered Sequencing

Use staggered sequencing to show direction or punctuation.


  • Creates fluidity
  • Direction stagger: like elements evenly sequenced for a directional domino effect.
  • Punctuation stagger: unlike elements; last element in sequence gets the most attention. This can be achieved by using offsets and delays in duration

Direction Stagger: Subitems in a Vertical Navigation

A user toggling subitems from collapsed to uncollapsed within a vertical navigation

Punctuation Stagger:

An example of a modal animation where the primary action button populates last so that it gets the most attention.

Dev tips:

  • You can use direction staggers with looped nth-child delays in SCSS, or promise-based delays in JavaScript. The SCSS approach works well when there’s a known, fixed number of items to be staggered. The JavaScript approach is better when the staggered items are dynamically loaded, or the items aren’t of the same class.

Strong Hierarchy: Serial Sequencing

Use serial sequencing to draw attention to another part of the experience.


  • For cause-and-effect relationships between elements.
  • Minimizing change blindness.
  • Like staggered sequencing, punctuates the last element, but serial sequencing makes this effect more pronounced. Transfers momentum of the flow; changes focus of the experience. This is very important for experiences that may consist of changes that happen out-of-view

Directing users to errors on In-App Guidance

A modal is clicked, triggering an error popover and automatic scroll within a right side panel, directing the user’s attention to a form-fill error.


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

  • Emphasis can create urgency: alerts, toasts, notifications
  • Emphasis can create visual interest and break monotony: celebrations, brand moments
  • Analogy: lead actors vs supporting actors vs extras. Most motion is done by the support and extras: subtle, functional. Your lead role is saved for something very special; it’s the one that stands out and is remembered.

Urgency: Toast modes for neutral, warning, error, and success. The extra dip in the movement provides more force to the rhythm, bringing extra focus into the action.

A red error toast animates into view with an extra dip in its movement, before animating away.

Notification alerts: The vibration emphasis around the red circled alert signifies a call out for attention.

A red circled alert animates on a notification bell in the top bar.

Visual Interest: Success in Progress Ring. The loading animation provides context for completing a task and the burst provides the emphasis necessary to give the success more impact.

A progress ring fills with green, followed by a success animation of a white checkmark and green radial burst.

Success as depicted in progress ring

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


Motion can be used to provide a fluid transition for the user when they are presented with new information. But remember that some elements won’t already be downloaded when the transition begins. In Kinetics, we aim to use experiences that improve the perceived latency of our pages. We can do this by turning what tends to feel like passive waiting to active waiting by offering users something to do in the interim as contents load.

  • A branded loading experience provides a great way to keep users engaged while loading full pages. Use branded loading sequences within key user flows where users tend to spend more time
  • If information will take a while to load, your transition will need spinners or stencils.

You can’t always sequence elements that load. Consider elegant ways of handling how individual sections on a page loads. Fading in new content, gradually increasing space for new content.

Loading in Pop-overs: When there is a lot of information, load content as it becomes available and fade in the new content

A pop-over shows a loading ring, then content loads in as it becomes available. A company profile loads first, followed by opportunities and cases.

Scrolling through content:

  • Progressively load content as users scroll. Loading information at the top of the page first and gradually loading the rest of the page will reduce wait times and quickly provide content for users to look at
  • It is important to not use GIFs while showing visuals as they cannot be paused or played and are rarely small in file size, thereby contributing to increased page load times
  • By default, pause any media that may be playing off screen until the user scrolls to the relevant section. You can pause and play animations by setting animation-play-state property to paused using CSS and JavaScript on the element with the animation style.
  • CSS Example in code
    • element { animation: happy-animation 2s linear; }
      element.paused { animation-play-state: paused; }
  • JavaScript example in code
    • // then if/when element is in the viewport
  • Alternatively, in JavaScript, set the property in JS
    • // on element load = 'paused';
      // then if/when element is in viewport = 'play';

Create anticipation with Spinners

  • Pair with text to progressively communicate with the user
  • Add variations in speed, acceleration or spinner elements to avoid monotonous repetition
A loading circle made up of five smaller circles animates on screen along with the text “loading.” The loading circle and text fade away briefly, then return with updated text that says Almost there.

Create anticipation with Stencil:

  • The place holder UI has to be an accurate representation of the final UI to enable a smooth fade transition to content and avoid misleading the user. For instance don’t use stencils for empty states as it contradicts user expectations
  • Load content by revealing information through progressive disclosure. For example, you can fade the stencil first to the predominant color, then to the blurred version of the content, and then to the final UI
As the user clicks on a button icon, a panel draws out from the right of the page and a stencil loader fades in and out rhythmically before fading in new panel items. When the user clicks on the close icon, the panel closes out of the view to the right of the page

You can use one or more loading treatments in combination to improve perceived loading times on dense pages:

  • Determinate progress bars can be used to tell the user when a page is fully loaded at the top of the page along with the use of stencils or spinners to depict the loading of individual UI elements. Doing this might mitigate cognitive load for the user in dense UI pages by letting them know how much of the page is fully loaded.
  • Spinners and stencils can be used in combination for different types of content. A spinner may be better suited for large areas with varying content type, whereas a stencil maybe better suited for standard UI structures

When to use Spinners and Stencils:

To learn about Lightning Design System best practices for stencils and spinner, refer to the design guidelines.

A panel animates in from the right, then expands to become larger before returning to its previous size.


Consider the context of the transition, and whether it might run several times over within a short time frame. Would this annoy or bore users? If so, consider a simpler alternate transition for subsequent runs, or eliminating subsequent transitions altogether.


  • SLDS panel transitions. List item staggers in only when the panel opens, not every time you navigate back from a subview
As a panel is opened for the first time, three list items in the panel animate in staggered, one slightly after the other. The panel expands again to show details about the filter settings before collapsing back to the list view.