import { Meta } from "@storybook/addon-docs";
import { MotionPreview } from "./MotionPreview"
import { Table, Tagline } from "@stories/components";

<Meta
    title="Materials/Motion"
    id="motion"
/>

# Motion

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

## Usage

Both variables can be combined in [transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) as well in CSS [animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) to set the tone of an animation/transition (animation is used interchangeably with transition from now on).

In transition declaration :

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

In animation declaration :

```css
@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](?path=/docs/tokens--page#durations), they help convey a message and makes animations smooth and responsive.

<Table
    columns={[
        { title: "Duration", headerStyle: { width: "180px" }, rowClassName: "code" },
        { title: "Value", headerStyle: { width: "180px" }, rowClassName: "code" }
    ]}
    rows={[
        ["t1", "100ms"],
        ["t2", "200ms"],
        ["t3", "300ms"],
        ["t4", "500ms"],
        ["t5", "800ms"]
    ]}
/>

## Easings

[Easings](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) 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](/docs/tokens--page#easings), each having their use.

### Productive

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

<code>cubic-bezier(0.22, 0.61, 0.36, 1)</code>

### 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.

<code>cubic-bezier(0.46, 0.03, 0.52, 0.96)</code>

### Expressive

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

<code>cubic-bezier(0.72, -0.66, 0.15, 1.5)</code>

## Playground

<MotionPreview />
