Motion

We define motion as two distinct styles: productive motion and expressive motion. Both are essential to show how users experience a product, be it a customer-facing marketing site or a complex, data-heavy dashboard. Both styles help to orient users by showing relationships between UI elements, and for providing feedback through interactions.

Productive motion

Productive motion is subtle and unobtrusive. It helps users stay focused on getting things done. This motion is used for button states, dropdowns, revealing additional information or for displaying tables and visualisations. Productive motion usually has a shorter duration as it is used mainly for micro-interactions.

Expressive motion

Expressive motion is used for significant events such as opening modals, side drawers and page loading. This motion gives meaning to movement. Expressive motion is used for system alerts and notifications as it provides users sufficient time to register important events.

The duration of motion varies according to the size of an element and the distance it moves. So shorter distances require less motion, and vice versa. Ensure that animation is used appropriately - too short and a user might miss an important notification, too long and the user experience lags. Keep in mind that context of the element being used is an important factor to decide the duration of animation.

Just like the organic form of the Pecten, our easing is inspired by nature. Elements should obey the laws of physics by speeding up quickly and slowing down smoothly. Easing curves are used to visualise elements when in motion.

Ensure that objects speed up quickly and slow down smoothly.

Do not use easing curves that have unnatural movements such as stretching, bounce or a sudden stop.

Default easing

Use default easing when an object is visible from the beginning to the end of its motion.

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.13/lottie.min.js"
  integrity="sha512-srGxQe2w7s50+5/nNgEVKYtBm15zRylJwdjxYnGEZr3mmHFJKFjA/ImA2OKizVzoIDX8XISMHDI1+az9pnumbQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<div class="examples preview">
  <div class="frame">
    <div id="lottie" class="lottie" />
    <p class="sg-text sg-text--small description">Use a click function to preview the animation</p>
  </div>
</div>

Entrance easing

Using entrance easing, an element appears quickly, and slows down to a stop. Use entry easing when adding elements to the UI that incorporate movement, such as modal or popover. Elements which move in response to user interaction, such as an alert or toggle switch should also use entrance easing.

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.13/lottie.min.js"
  integrity="sha512-srGxQe2w7s50+5/nNgEVKYtBm15zRylJwdjxYnGEZr3mmHFJKFjA/ImA2OKizVzoIDX8XISMHDI1+az9pnumbQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<div class="examples preview">
  <div class="frame">
    <div id="lottie" class="lottie" />
    <p class="sg-text sg-text--small description">Use a click function to preview the animation</p>
  </div>
</div>

Exit easing

Use exit easing for removing elements from view, such as modal or popover. Speeding up elements as they exit the viewport suggests that their departure is permanent.

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.13/lottie.min.js"
  integrity="sha512-srGxQe2w7s50+5/nNgEVKYtBm15zRylJwdjxYnGEZr3mmHFJKFjA/ImA2OKizVzoIDX8XISMHDI1+az9pnumbQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<div class="examples preview">
  <div class="frame">
    <div id="lottie" class="lottie" />
    <p class="sg-text sg-text--small description">Use a click function to preview the animation</p>
  </div>
</div>

Follow these steps to check the use of motion in your interface:

• First, define the end goal of the product and whether it requires animation.
• Set up a hierarchy for information in the view.
• Explore the user journey which you are creating.
• Identify the key moments of UI motion in the user journey.
• Determine the motion.
• Create a prototype.
• Test the motion with users.