import { Canvas, Meta, Story, Props } from '@storybook/addon-docs/blocks'
import Animate from './'
import { Animate as AnimateComponent } from './Animate'
import { Card, Heading, Text } from '../index'
import { AnimateOutExample } from './Animate.storiesHelpers'

<Meta component={Animate} title="Utilities/Animation/Animate" />

# Animate

An Animate component is a wrapper component that provides CSS-based animations. Animate is an extension of `<Transition>` from [`react-transition-group`](https://github.com/reactjs/react-transition-group/).

<Canvas>
  <Story name="default">
    <div>
      <p>No delay</p>
      <Animate sequence="fade down">
        <Card>
          <Heading>Anchorman</Heading>
          <Text>Stay classy San Diego!</Text>
        </Card>
      </Animate>
    </div>
  </Story>
</Canvas>

#### Props

<ArgsTable of={AnimateComponent} />

#### Ownership

- **Engineering**: Juan Pablo

<br />
<br />

## Stories

#### custom delay/duration

<Canvas>
  <Story name="custom delay/duration">
    <div>
      <p>Tiny tiny delay</p>
      <Animate sequence="fade scale" delay={300} easing="bounce">
        <Card>
          <Heading>Anchorman</Heading>
          <Text>Stay classy San Diego!</Text>
        </Card>
      </Animate>
      <br />
      <p>delay 1 second… (duration: 400ms)</p>
      <Animate sequence="fade down" delay={1000} duration={400}>
        <Card>
          <Heading>Anchorman</Heading>
          <Text>Stay classy San Diego!</Text>
        </Card>
      </Animate>
      <br />
      <p>Suupperr slow (duration: 3000ms)</p>
      <Animate sequence="fade down" duration={3000}>
        <Card>
          <Heading>Anchorman</Heading>
          <Text>Stay classy San Diego!</Text>
        </Card>
      </Animate>
      <br />
    </div>
  </Story>
</Canvas>

#### animate out

<Canvas>
  <Story name="animateOut">
    <AnimateOutExample />
  </Story>
</Canvas>
