Easings

Easing controls the smoothness of an animation's start and stop. It describes CSS Transition.

Read more about creating animations with Sky UI in the Motion Guide.

import { easing } from '@sky-uk/ui-core';

easing('ease-out');

// returns 'ease-out'

Available Easings

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.