Motion

Our motion utilities consists of two set of values, durations and easings.

Usage

Both variables can be combined in transitions as well in CSS animations to set the tone of an animation/transition (animation is used interchangeably with transition from now on).

In transition declaration :

.tease {
    transition: color var(--o-ui-easing-duration-1) var(--o-ui-easing-focus);
}

In animation declaration :

@keyframes tease-animation {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.tease {
    animation: tease-animation var(--o-ui-easing-duration-2) var(--o-ui-easing-productive);
}

Duration

Orbit exposes 5 durations, they help convey a message and makes animations smooth and responsive.

Easings

Easings denotes a mathematical function that describes the rate at which a numerical value changes. They adds life to motion, providing natural rests, they set the mood of an animation. Orbit provides 3 pre-defined easings, each having their use.

Productive

Used in animations that are not in the way, they quickly change from one state to another.

Focus

Used in animations that are designed to draw the user’s attention on what changed, in order to let them move on with their next task.

Expressive

Used in animations that are meant to give a sense of completeness or resolution to the user. Use them wisely.

Playground