Overview
Why Use Motion
Motion is a powerful tool to enhance user experience, offering more than mere aesthetic appeal. It plays a crucial role in making products more usable and distinctive, guiding users through interactions with purpose and intuition.
Motion is not just a decorative element but a functional aspect of design that enriches user interaction. It helps maintain the user's flow, drawing attention to changes on the screen, enhancing the perceived speed of task completion, and injecting life and meaning into the experience.
Principles
1. Purposeful
Motion must be employed with intention, aiming to support users in achieving their goals. Whether it's connecting different states or views, highlighting important details, or providing feedback, every motion should have a clear purpose.
2. Expressive
Beyond functionality, motion is also expressive, delighting users with details that transform routine interactions into engaging moments.
3. Intuitive
Motion should feel familiar and expected, mirroring real-world phenomena like acceleration and deceleration to create a natural feel.
4. Responsive
Motion should be responsive, reacting to user interactions with immediate visual feedback that makes the interface feel alive. It should start quickly and decelerate towards the end, to make transitions feel smooth while ensuring they're quick enough to avoid user frustration. Integrating motion seamlessly means avoiding distractions by using just the right amount of animation to convey the intended message.
Motion Values
Easing
Easing determines the acceleration curve of an animation, making it appear more natural. Real-world objects don't move at constant speeds; they accelerate and decelerate. Similarly, easing in animations can range from linear (constant speed) to more complex curves that mimic natural motion.
Linear
Ease Out
Ease In
Ease In Out
| Value | Easing function | Usage |
|---|---|---|
ease-out | Ease Out | Ease Out starts quickly and then slows down towards the end, creating a sense of deceleration. This function is ideal for elements that need to settle into place or fade out, giving a natural feeling of coming to a stop. This is most common easing in Sky UI, used for hover transitions and appearance of the elements. |
ease-in | Ease In | Ease In gradually speeds up from a slow start, providing a sense of acceleration. It's perfect for drawing attention to the beginning of transitions or animations, such as elements sliding into view from off-screen or content loading indicators. |
ease-in-out | Ease In Out | Combining the effects of Ease In and Ease Out, this function starts slow, accelerates through the middle, and slows down again at the end. It's best suited for more complex or longer transitions that need a smooth and natural flow, like page transitions or moving objects within a scene. |
linear | Linear | This easing function maintains a consistent pace from start to finish, making it predictable and straightforward. It's best used for simple and very short transitions where no accents are required and a uniform speed is desired, e.g. changing colours or opacity. |
Duration
The duration of an animation should reflect the complexity of the animated element. Shorter durations are suitable for minor changes, while longer durations may be necessary for more significant movements. It's crucial to balance speed and comprehension, ensuring animations are quick enough to prevent lag whilst allowing users to understand the changes.
Duration
| Value | Duration | Usage |
|---|---|---|
short-1 | 100ms | Functional animations of small elements, best paired with linear easing. |
short-2 | 200ms | This value is used for quick and smooth animation of small elements. Commonly used for Hover effects of Buttons, Checkboxes, Switches, Cards etc. |
medium-1 | 400ms | Best suited for medium size components and elements that require moderate motion, such as the Slide transitions in Carousels, Modals. |
medium-2 | 600ms | Animations requiring a slower and more deliberate benefit from this duration. For example, Notification and Toast use this value for a slower, more controlled motion. |