@wix/design-system/dist/docs/components/BounceAnimationExamples.md

@wix/design-system

## Feature Examples


### "onEnd" example
- description: <p>The callback is executed when the transition ends. This allows triggering actions after component finished playing its animation.</p>
- example: 
```jsx 
() => {
    const [ active, setActive ] = React.useState(false);
    const inputRef = React.useRef(null);
    return (
        <Layout>
          <Cell span={8}>
            <BounceAnimation
              onEnd={() => {
                inputRef.current.focus();
                setActive(false);
              }}
              active={active}
            >
              <FormField labelPlacement="left" label="Field label">
                <Tooltip content="I am here" >
                   <Input ref={inputRef} />
                </Tooltip>
              </FormField>
            </BounceAnimation>
          </Cell>
          <Cell span={4}><Button onClick={() => setActive(true)}>Play</Button></Cell>
    </Layout>
   )
}
```

### Loop example
- description: <p>When `loop` prop is true, the child component bounces repetitively until stopped by other event.</p>
- example: 
```jsx 
() => {
    const [ active, setActive ] = React.useState(false);

    return (
        <Layout>
          <Cell span={8}>
            <BounceAnimation loop active={active}>
              <FormField labelPlacement="left" label="Field label">
                <Input />
              </FormField>
            </BounceAnimation>
          </Cell>
          <Cell span={4}>
             <Button onClick={() => setActive(!active)}>{active ? 'Stop' : 'Play'}</Button>
         </Cell>
        </Layout>
   )
}
```

### Delay example
- description: <p>The `delay` prop is  used to set a delay before the animation execution.</p>
- example: 
```jsx 
() => {
    const [ active, setActive ] = React.useState(false);

    return (
        <Layout>
          <Cell span={8}>
            <BounceAnimation onEnd={()=>setActive(false)} delay="500ms" active={active}>
              <FormField label="With delay" labelPlacement="left">
                <Input />
              </FormField>
            </BounceAnimation>
          </Cell>
          <Cell span={4}><Button onClick={() => setActive(true)}>Play</Button></Cell>
        </Layout>
   )
}
```

### Size example
- description: <p>The scale of the animation is set manually, according to the size of the object:\n</p>
- example: 
```jsx 
() => {
    const [ active1, setActive1 ] = React.useState(false);
    const [ active2, setActive2 ] = React.useState(false);
    return (
    <Layout>
      <Cell>
        <Layout>
          <Cell span={5}>
            <BounceAnimation onEnd={()=>setActive1(false)} active={active1}>
               <FormField labelPlacement="left" label="Small">
                <Input placeholder="I scale to 1.03" />
              </FormField>
            </BounceAnimation>
          </Cell>
          <Cell span={4}><Button onClick={() => setActive1(true)}>Play</Button></Cell>
        </Layout>
      </Cell>
      <Cell>
        <Layout>
          <Cell span={8}>
            <BounceAnimation onEnd={()=>setActive2(false)} active={active2}>
              <FormField labelPlacement="left" label="Medium">
                <Input placeholder="I scale to 1.07" />
              </FormField>
            </BounceAnimation>
          </Cell>
          <Cell span={4}><Button onClick={() => setActive2(true)}>Play</Button></Cell>
        </Layout>
      </Cell>
    </Layout>
   )
}
```