Animator

Notes

An animation utility for preset entrance/exit animations using React Transition Group. If rendering more than one child, or toggling the state of a single child, be sure each child has a unique key.

Props

animationoneOf('fade', 'grow', 'fadeGrow')['fadeGrow']
The name of the animation to be applied to children. Defaults to 'fadeGrow'.
childrenany
entranceDelaynumber[100]
Value in milliseconds before the entrance animation begins

Example: When using a single child, it will animate in when first rendered, and animates out when unmounted.

const AnimatorExample = () => {

  const [isVisible, setIsVisible] = React.useState(true);

  return (
    <React.Fragment>
      <div style={ { height: '100px' } }>
        <Animator entranceDelay={500} animation="grow">
          {isVisible && (
            <Card containerClasses="p3">
              This card has both entrance and exit animations. The entrance has a 500ms delay.
            </Card>
          )}
        </Animator>
      </div>
      <Button
        onClick={() => setIsVisible(!isVisible)}
      >
        {isVisible ? 'Dismiss Card' : 'Show Card'}
      </Button>
    </React.Fragment>
  );
};

render(<AnimatorExample />);

const AnimatorExample = () => {

  const [isVisible, setIsVisible] = React.useState(true);

  return (
    <React.Fragment>
      <div style={ { height: '100px' } }>
        <Animator entranceDelay={500} animation="grow">
          {isVisible && (
            <Card containerClasses="p3">
              This card has both entrance and exit animations. The entrance has a 500ms delay.
            </Card>
          )}
        </Animator>
      </div>
      <Button
        onClick={() => setIsVisible(!isVisible)}
      >
        {isVisible ? 'Dismiss Card' : 'Show Card'}
      </Button>
    </React.Fragment>
  );
};

render(<AnimatorExample />);

Example: Crossfade two elements by conditionally rendering. Be sure each child has a unique key, and also that the children are absolutely positioned.

const CrossFadeExample = () => {
  const [isLoading, setIsLoading] = React.useState(true);
  return (
    <div>
      <div style={ { height: '200px' } }>
        <Animator animation="fade">
          { isLoading ? (
            <div key="loader" className="absolute size12of12">
              <LoadingCoffeeCup className="my3" title="Loading animation" />
            </div>
          ) : (
            <form key="form" className="p3 absolute size12of12">
              <Field id="firstName" value="Zac">
                First name
              </Field>
              <Field id="favoriteDrink" value="Flat white">
                Favorite Drink
              </Field>
            </form>
          )}
        </Animator>
      </div>
      <Button className="my3 ml3" onClick={ () => setIsLoading(!isLoading)}>
        Toggle Loading
      </Button>
    </div>
  );
};

render(<CrossFadeExample />);

const CrossFadeExample = () => {
  const [isLoading, setIsLoading] = React.useState(true);
  return (
    <div>
      <div style={ { height: '200px' } }>
        <Animator animation="fade">
          { isLoading ? (
            <div key="loader" className="absolute size12of12">
              <LoadingCoffeeCup className="my3" title="Loading animation" />
            </div>
          ) : (
            <form key="form" className="p3 absolute size12of12">
              <Field id="firstName" value="Zac">
                First name
              </Field>
              <Field id="favoriteDrink" value="Flat white">
                Favorite Drink
              </Field>
            </form>
          )}
        </Animator>
      </div>
      <Button className="my3 ml3" onClick={ () => setIsLoading(!isLoading)}>
        Toggle Loading
      </Button>
    </div>
  );
};

render(<CrossFadeExample />);

Example: A single child can be animated in and out when updating props. Be sure the two states provide a unique key on the child.

const ToggleExample = () => {
  const [button, setButton] = React.useState('close');
  const ariaLabel = button === 'close' ? 'Close button' : 'Menu button';
  return (
    <div className="p3">
      <div className="relative" style={{height: '56px'}}>
        <Animator>
          <IconButton key={button} className="absolute" path={iconPaths[button]} ariaLabel={ariaLabel} />
        </Animator>
      </div>
      
      <p className="pt3">
        <Button className="mr3" onClick={() => setButton(button === 'close' ? 'hamburger' : 'close')}>
          Toggle button type
        </Button>
      </p>
    </div>
  );
};

render(<ToggleExample />);

const ToggleExample = () => {
  const [button, setButton] = React.useState('close');
  const ariaLabel = button === 'close' ? 'Close button' : 'Menu button';
  return (
    <div className="p3">
      <div className="relative" style={{height: '56px'}}>
        <Animator>
          <IconButton key={button} className="absolute" path={iconPaths[button]} ariaLabel={ariaLabel} />
        </Animator>
      </div>
      
      <p className="pt3">
        <Button className="mr3" onClick={() => setButton(button === 'close' ? 'hamburger' : 'close')}>
          Toggle button type
        </Button>
      </p>
    </div>
  );
};

render(<ToggleExample />);

Example: A list can be managed with Animator, with entrance and exit animations for new or exiting items.

const AnimatorList = () => {
  const [numCards, setNumCards] = React.useState(2);

  const children = Array.from(Array(numCards).keys()).map((i) => (
    <Card key={i} containerClasses="p3 mb3">
      <Heading size="sm" tagName="h2">
        {`Card number ${i}`}
      </Heading>
    </Card>
  ));

  return (
    <div>
      <Animator>{children}</Animator>
      <p className="pt3">
        <Button className="mr3" onClick={() => setNumCards(numCards + 1)}>Add a card</Button>
        <Button onClick={() => setNumCards(numCards - 1)}>Remove a card</Button>
      </p>
    </div>
  );
};

render(<AnimatorList />);

const AnimatorList = () => {
  const [numCards, setNumCards] = React.useState(2);

  const children = Array.from(Array(numCards).keys()).map((i) => (
    <Card key={i} containerClasses="p3 mb3">
      <Heading size="sm" tagName="h2">
        {`Card number ${i}`}
      </Heading>
    </Card>
  ));

  return (
    <div>
      <Animator>{children}</Animator>
      <p className="pt3">
        <Button className="mr3" onClick={() => setNumCards(numCards + 1)}>Add a card</Button>
        <Button onClick={() => setNumCards(numCards - 1)}>Remove a card</Button>
      </p>
    </div>
  );
};

render(<AnimatorList />);