Motion when utilized properly can make products more usable and differentiated. The following principles intend to provide the fundamental role of motion in Salesforce products
Motion is Functional
Motion helps users maintain flow, drawing attention to screen changes both small and large, and increasing the perceived speed of the task.
A centered modal fades away after a button is clicked, an error popover fades in from the top bar, and then the right panel scrolls to a highlighted input field error.Example of motion interaction in the Dueling Picklist Component that draws user attention to changes when a list item is moved to another list.
Motion is Structural
Motion helps users know where they are, orienting them with a consistent spatial model, and creating Kinetics continuity across pages and components.
A side panel animates in from the right side, a cursor navigates within the panel interacting with content before closing the panel.
Motion is Expressive
Motion delights users with unexpected details that turn mundane moments into something special and memorable. These details remind users that experiences are crafted by people, not machines.
Emphasis That Creates Visual Appeal
A progress loader fills as a cursor marks three checkboxes complete, after the third checkbox is clicked the progress loader performs a success animation.
Emphasis That Creates Urgency
A notification bell in the global header chimes with a red dot.An Error Toast bounces down, it’s movement further emphasizing the need for attention