Left to right
Diagonal
Upward
Clockwise
Left to right
Elements enter and exit view from left to right horizontally.
Application
Progress indicator
Dot grid
Data visualization
Content transitions
Diagonal
Secondary elements move at an upward, 45 degree angle.
Application
Dot grid
Energy beams
Upward
Content transitions with cards or text can animate into place on page load or on scroll load. Also, Introduce new pages or modals by moving position or scaling upward and closing downward.
Application
Page transitions
Data visualization
Content transitions
Clockwise
Elements rotate clockwise to transition between button states, draw data visualizations, and show loading graphics.
Application
Buttons
Data visualizations
Loading graphics
Direction logic
Not everything should move in a forward direction. Some animations are better suited to move based on the design layout and user’s interaction.
Always tie an animation closely to the interaction point. In these two examples, when the button is pressed, the movement goes outward to open the menu. When closing, the movement comes back towards the interaction point.
Use the direction elements animate to indicate how the interface works. In this example, upon loading the page, the images animate into view from right to left. This direction gives the user a hint how they can interact with the carousel.
Continue reading
Animation easing
Easing adds acceleration and deceleration, creating motion that resembles the way things move in the physical world.
Motion resources
Downloads, links, guides, and tools to help you learn, design, and implement motion for the QuickBooks ecosystem.
