# Animation

## Patterns

Animations in Jobber fall under categories based on their purpose:

### Reveal

Reveals are used to show and hide information on the screen. For example,
toasts, modals, sidebars appearing and disappearing on the screen.

### State change

State changes are used to inform the user that a context change is taking place.
This is used when the object has changed state due to user interaction (e.g.
hover and focus states).

### Emphasis

Emphasis is used to bring attention to something on already on the screen. For
example, when you want to guide users to a particular part of the interface for
onboarding or learning purposes.

### Delighter

Delighters can be used occasionally to create surprise and delight, and can give
personality to our brand. These can be used to reinforce success in an important
milestones in a user's journey.

## Timing

Use judgement when determining the appropriate timing durations for animations.
This will depend on the size of the element and the distance it covers.
Animations for larger elements or longer distances should be longer than smaller
elements or shorter distances.

| Name               | Examples of use                                         | Value  |
| :----------------- | :------------------------------------------------------ | ------ |
| `--timing-quick`   | smaller elements exiting, small elements, state changes | 100ms  |
| `--timing-base`    | larger elements exiting, small elements, state changes  | 200ms  |
| `--timing-slow`    | modals, side panels                                     | 300ms  |
| `--timing-slower`  | large elements traversing across large area             | 400ms  |
| `--timing-slowest` | page transitions                                        | 500ms  |
| `--timing-loading` | candy-stripe loading                                    | 1000ms |

## Easing

Animations are linear by default, but this lends an uncanny robotic feeling to
the motion of an element. Easing creates a more natural, pleasing transition
between animation states to mimic the acceleration and deceleration of objects
in the real world.

### Ease in

Starts slow and speeds up. Use for exiting elements that don’t fade out.

### Ease out

Starts fast and slows down. Use for entering elements. For example, opening a
toast, modal, or menu.

### Ease both

Combines features of ease in and out curves. Use for moving from point to point,
or for when the element disappears from the screen, but the user can return to
the previous place at any time. For example, opening and closing a side drawer,
side nav, or accordion.

### Linear

Use for color and opacity changes (things that don’t move).