Refine By

Motion

  • Contents:
There are four types of movement in motion design. These types can be combined to act on a single element or on multiple elements simultaneously:

  • Scale
  • Transform
  • Translate
  • Transition

Scale

 
Scale refers to a change in size. Elements that scale either grow bigger or shrink in size from an original state.

Use the following values to showcase changes in scale:

  • Scale up (by x %)
  • Scale down (by x%)

Transform

 
A transformation on an element refers to a mutation of one or more of its attributes without a change in size. Two very common transformations are:

  • Changes in opacity – mutation on an object’s visibility
  • Rotation – mutation on an object’s orientation

Use the following values to showcase a transformation:

  • Fade In (opacity range: 0 – 1)
  • Fade Out (opacity range: 1 – 0)
  • Rotate (degree range: 0 – 360)

Translate

 
A translation refers to movement from one point to another. Translations are typically used in transition effects such as when an object enters or exits the user’s view.

Use the following values when presenting transitions

  • Slide Up
  • Slide Down
  • Slide Left
  • Slide Right

Transition

 
A transition refers to a change from one view/scene to the next. Transitions can apply to entire pages or sections of content on page or in a content component such as tabs.

Use the following values for presenting transitions

  • Slower
  • Slow
  • Fast
  • Faster

Reference

 
The animations referenced below are purely baseline. They are meant to give you the building blocks to build more complex animations as needed.

Accordion

Accordion body

  • Duration: 700ms
  • Easing: Ease-in-out
  • Bezier: 0.69, 0.02, 0.35, 1

Accordion Caret

  • Duration: 350ms
  • Easing: Ease-out
  • Bezier:
  • Bezier: 0, 1, 0.35, 1

 

 

App Shell

  • Duration: Timer based (depends on load time)
  • Easing: linear
  • Bezier: n/a

Buttons & Links

  • Mouseover / Touch
    • Transformation: change in colour
    • Duration: instant