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 a transition declaration:

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

In an animation declaration:

@keyframes tease-animation  {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
 
.tease {
    animation: tease-animation var(--hop-easing-duration-2) var(--hop-easing-productive);
}

Tokens

Duration

Hopper 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 add life to motion by providing natural rests and setting the mood of an animation. Hopper provides 3 predefined 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 sparsely.

Playground