NewsKit Mobile Logo

Motions

Motion is used to create movement and narrative within your product. Animated interface elements don't just attract attention, they enhance user experience and help guide user flow. They reveal the functionality and process of a user interface much better than static text. Like any other element of good design, UI motions should have a purpose without being too noticeable.

Easing

Easing controls the velocity of a motion over its duration. It helps determine a motion’s feeling and can aid in matching the appearance of real-world physics. Easing values are plotted as curves…..

TokenValue
motionEaseIncubic-bezier(.5, 0, 1, 1)
motionEaseOutcubic-bezier(0, 0, .5, 1)
motionEaseInAndOutcubic-bezier(.5, 0, .5, 1)

Duration

Duration is fundamental to motion. Used properly, it helps motions feel responsive and natural. Determining which timing to use is a matter of context, including the complexity of the action and the distance over which the motion occurs.

TokenValue
motionDuration010100ms
motionDuration020200ms
motionDuration030300ms
motionDuration040400ms
motionDuration050500ms

Accessibility

When creating custom motions, always keep the following points in mind to help ensure the quality and usability of your implementation.

  • Always consider the needs of people who are sensitive to motion. Consider avoiding large, abrupt movements, or moving multiple objects at the same time in different directions.
  • If large scale motions play a big role in your product’s experience, offering an option to reduce motion can improve usability for people adversely affected by motion.