## Feature Examples
### Enter Animation
- description: Make component appear using these four animation types: - `Fade In` - use it for sudden appearances or state changes. - `Move In` - use it to emphasize direction from which object appears. It supports 4 possible directions. - `Expand` - use it for objects that appear in between the content. It supports 4 possible directions. - `ScaleUp `- use it to explain that object appears from a certain point. It supports 9 possible directions. To see all possible direction options please check API.
- example:
```jsx
() => {
const [showFade, setShowFade] = React.useState(false);
const [showMove, setShowMove] = React.useState(false);
const [showExpand, setShowExpand] = React.useState(false);
const [showScaleUp, setShowScaleUp] = React.useState(false);
return (
fadeIn
moveIn
expand
scaleUp
);
};
```
### Exit Animation
- description: Make components disappear using these four animation types: - `Fade Out` - use it for appearances or state changes. - `Move Out` - use it to emphasize the direction to which object disappears. It supports 4 possible directions. - `Collapse` - use it for objects that disappear in between the content. It supports 4 possible directions. - `ScaleDown` - use it to explain that an object disappears to a certain point. It supports 9 possible directions. To see all possible direction options please check API.
- example:
```jsx
() => {
const [showFade, setShowFade] = React.useState(true);
const [showMove, setShowMove] = React.useState(true);
const [showCollapse, setShowCollapse] = React.useState(true);
const [showScaleDown, setShowScaleDown] = React.useState(true);
return (
fadeOut
moveOut
collapse
scaleDown
);
};
```
### Swoosh
- description: The `swoosh` preset fades content in while it drifts and stretches in from one edge, and out the way it came. It pairs with layout components that slide into view, such as a side panel. Set the same `direction` on the enter and exit animation so the content retreats toward the edge it entered from. The motion is skipped automatically when the user prefers reduced motion.
- example:
```jsx
() => {
const [show, setShow] = React.useState(false);
return (
);
};
```
### Duration
- description: Use it to determine how long animation plays. Choose form 6 following properties: - `Fast01` - 100ms. Use for small objects such as Buttons or Toggles. - `Fast02` - 150ms. Use for larger than small objects such as Tooltips or Section Helpers. - `Medium01` - 200ms. Use for medium size objects like dropdowns or accordions. - `Medium02` - 300ms. Use for greater than medium size objects like side panel or small modals. - `Slow01` - 450ms. Use for larger objects like big modals or large collapsible content. - `Slow02` - 600ms. Use for very large objects like page transitions.
- example:
```jsx
() => {
const [showMove, setShowMove] = React.useState(true);
const renderTransition = (duration) => {
return (
{duration}
);
};
return (
{renderTransition('fast01')}
{renderTransition('fast02')}
{renderTransition('medium01')}
{renderTransition('medium02')}
{renderTransition('slow01')}
{renderTransition('slow02')}
);
};
```
### Easing
- description: Use it to determine the velocity of the object's motion: - `Enter Easing` - used for objects that appear on the screen during the enter animation. - `Exit Easing` - used for objects that disappear from the screen during the exit animation. - `Standard Easing` - used for objects that stay present on the screen during enter or exit animations. For example toggle switch.
- example:
```jsx
() => {
const [showMove, setShowMove] = React.useState(true);
const renderEasing = (easing) => (
{easing}
);
return (
{renderEasing('enterEasing')}
{renderEasing('exitEasing')}
{renderEasing('standardEasing')}
);
};
```
### Delay
- description: Use it to determine the time it takes for animation or next animation to start. There are three delay values: - `Short` - 100ms. - `Medium` - 150ms. - `Long` - 200ms.
- example:
```jsx
() => {
const [showMove, setShowMove] = React.useState(true);
const renderTransition = (delay) => {
return (
{delay}
);
};
return (
{renderTransition('short')}
{renderTransition('medium')}
{renderTransition('long')}
);
};
```
## Common Use Case Examples
### Animating list items
- description: Use Transition component in cases when new elements appear or disappear from a screen, like in this case when dismissing list items.
- example:
```jsx
() => {
const [child, setChild] = React.useState([]);
const handleRemove = (id) => {
setChild((previous) => previous.filter((c) => c.id !== id));
};
const handleAddChild = () => {
const id = new Date().getTime();
const item = {
id,
node: (
{
handleRemove(id);
}}
options={[
{ value: Order {child.length}, align: 'left' },
{ value: 2 minutes ago, align: 'center' },
{
value: (
handleRemove(id),
}}
/>
),
},
]}
/>
),
};
setChild([item, ...child]);
};
return (
}
onClick={() => handleAddChild()}
>
Add new order
}
/>
{child.map((c) => c.node)}
);
};
```