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.

Read more

Motion resources

Downloads, links, guides, and tools to help you learn, design, and implement motion for the QuickBooks ecosystem.

Read more

  • Was this Helpful?
  •