We can communicate progress and a sense of accomplishment to our customers with forward movement. This is done by consistently having motion that moves left to right, diagonal, upward, and clockwise.
Left to right
Left to right
Elements enter and exit view from left to right horizontally.
Secondary elements move at an upward, 45 degree angle.
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.
Elements rotate clockwise to transition between button states, draw data visualizations, and show loading graphics.
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.
Easing adds acceleration and deceleration, creating motion that resembles the way things move in the physical world.