# AnimatedSwitcher

Smoothly switch between two components that aim to add delight when the user
interacts with them.


## Configuration

Animating between 2 icons is done in a more opinionated way where it would spin
from 1 icon to another. The animation reverses when you want to go back to the
initial icon. See
[AnimatedSwitcher/Icon example](/storybook/web/?path=/story/components-utilities-animatedswitcher--icon).


## Props

### Web

#### AnimatedSwitcher

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `initialChild` | `ReactElement<unknown, string | JSXElementConstructor<any>>` | Yes | — | The component that shows up when the `switched` prop is `false` |
| `switched` | `boolean` | Yes | `false` | Determines when to switch the component to the `switchTo` prop. |
| `switchTo` | `ReactElement<unknown, string | JSXElementConstructor<any>>` | Yes | — | The component that shows up when the `switched` prop is `true` |
| `type` | `"fade" | "slideFromBottom"` | No | `slideFromBottom` | Change the transition between 2 elements. |

#### AnimatedSwitcher.Icon

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `initialIcon` | `IconNames` | Yes | — |  |
| `switched` | `boolean` | Yes | `false` | Determines when to switch the component to the `switchTo` prop. |
| `switchToIcon` | `IconNames` | Yes | — |  |
