Duration
The duration of an animation often corresponds to the level of visual impact and the amount of interface change it introduces. The choice of duration depends on the user experience you want to create and the importance of the animation in guiding the user's attention and understanding.
Easing
Choosing the right easing function for your animations can significantly impact how they feel and look to users. Each easing function serves a specific purpose and can enhance the overall user experience by making animations feel more lifelike and engaging.
Transitions
Each of these animation transition types serves specific purposes in enhancing user experience and guiding user interactions. These are not set tokens and will need to be configured on a case-by-case basis by the engineers.
Color
Color transitions involve changing the color of an element to indicate different states, such as hover or active states. This type of transition is often used to provide visual feedback to users when they interact with elements like buttons or links. For instance, a button might change its background color when hovered over to indicate interactivity.
Fade
Fade transitions involve changing the opacity of an element to make it smoothly appear or disappear. When an element fades in, it gradually becomes more visible from an initially transparent state. When it fades out, it gradually becomes more transparent until it disappears from view. This type of transition is commonly used to make animations feel smoother and less abrupt.
Slide
Slide transitions involve moving an element in or out of view to bring attention to it or remove it from the user's sight. Elements can slide in from the side, top, bottom, or slide out of view in the opposite directions. This type of transition is often used to create a sense of movement and to guide the user's focus toward a specific element.
Fade-Slide
Fade-slide transitions combine both movement and opacity change to draw attention and provide a smooth transition for medium-sized elements. This approach is particularly effective when you want an element to catch the user's eye while still maintaining a sense of elegance. For example, the dynamic search will both slide into view and simultaneously fade in to avoid a sudden appearance.
Size Transform
Size transform transitions involve changing the size of an element, often to expand or collapse it, revealing or hiding content or additional interactions. This type of transition is useful for creating dynamic interfaces where certain parts of the content can be revealed or hidden without causing a jarring visual change.
Additional Reading
The ultimate guide to proper use of animation in UX https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
Motion.ed https://motion.zajno.com/
Motion in UX Design https://uxplanet.org/motion-in-ux-design-90f6da5c32fe
How to use motion for better UX https://uxdesign.cc/how-to-use-motion-design-to-improve-the-ux-of-digital-products-42f40feab46f
The Role of Animation and Motion in UX https://www.nngroup.com/articles/animation-purpose-ux/