Motion
We use motion to enhance interactions, create continuity and provide feedback in our digital experiences.
Types of motion
At BA we use motion in 2 primary use cases
Transitions
Transition are used when elements enter, exit, or move between states. This type of motion helps users understand spatial relationships and hierarchy within our interface.
Feedback
Feedback animations provides the user with visual confirmation of an action. To provide a feeling of reassurance and makes things move faster than they actually do.
Durations and examples
We support 4 purposeful durations of motion for distinct use cases.
150ms to 300ms
Hovering checkboxes, radios, buttons and links. Clicking/tapping on toggles.
300ms to 400ms
Sheet open/close, Megamenu open/close, Typeahead open/close.
400ms to 2 seconds
Transitioning between screens, (app), dismissing messages.
2 seconds (and over)
Page loaders, skeleton loaders, success animations
Easing
Easing helps with making transitions and feedback more natural and usable. Always include ease-in-out when applying animations.
{transition-timing-function: ease-in-out;}
Guidelines
The speed of an animation is hugely important for the usability — too fast, and it’s hard to see or dizzying; too slow, and it becomes intrusive and feels like a delay to the user.
Motion is much more common in native app experiences than it is on web. Always include motion in O/S conventions like moving across screens and opening sheets.
Overusing animations can be harmful to the user experience and accessibility. Only use animations where necessary. Make it purposeful and meaningful to the experience.
Accessibility
Some users experience distraction or nausea from animated content. For example, if scrolling a page causes elements to move (other than the essential movement associated with scrolling) it can trigger vestibular disorders.
For any information that moves, blinks, or scrolls automatically, lasts more than five seconds, and is displayed alongside other content, there must be an option for the user to pause, stop, or hide it—unless the movement, blinking, or scrolling is an essential part of the activity.
Looping animations should be avoided whenever possible, as they can become distracting very quickly.
Ensure that there are no flashing animations present, flashing is defined as anything that flashes more than three times in a one second period.
Flashing content can cause migraines, dizziness, nausea, and seizures.
Loading states
Our design system offers several types of loading states. Learn more about what loading states to use and when to use them.