## Feature Examples

### "onEnd" example
- description: The callback is executed when the transition ends. This allows triggering actions after component finished playing its animation.
- 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: When \`loop\` prop is true, the child component bounces repetitively until stopped by other event.
- 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: The \`delay\` prop is used to set a delay before the animation execution.
- 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: The scale of the animation is set manually, according to the size of the object:
- 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>
  );
};
```