<AnimateGroup />

<AnimateGroup /> is made to chain up <Animate /> and <AnimateKeyframes /> in sequences, so animations will play one after another in such order which has been defined.

Examples:

Set up animation sequence with sequenceIndex.

import react from 'react';
import { Animate, AnimateGroup } from 'react-simple-animate';

const props = {
  start: { opacity: 0 },
  end: { opacity: 1 }
};

export default () => (
  <AnimateGroup play>
    <Animate {...props} sequenceIndex={0} /> // sequence index will defined which animation play first
    <Animate {...props} sequenceIndex={1} />
    <Animate {...props} sequenceIndex={2} />
  </AnimateGroup>
);

Set up animation sequence with sequenceId.

import react from 'react';
import { Animate, AnimateGroup } from 'react-simple-animate';

const props = {
  start: { opacity: 0 },
  end: { opacity: 1 }
};

export default () => (
  <AnimateGroup play sequences={[
    { sequenceId: 'header', ...props } // play first
    { sequenceId: 'content', ...props, overlay: 0.1 } // play during header animation and overlay by 0.1s
    { sequenceId: 'footer', ...props, delay: 0.4 } // play after content with 0.4s seconds delay
  ]}>
    <Animate sequenceId="header" />
    <Animate sequenceId="content" />
    <Animate sequenceId="footer" />
  </AnimateGroup>
);

Props

• play: boolean = false required

  Defaults to false, set to true to start the animation.

• sequences: Array<number> | Array<Object>

  Array with sequenceIndex or sequenceId. default behaviour will be animate in order of sequenceIndex.

  <AnimateGroup play> 
    <Animate end={{ opacity: 1 }} sequnceIndex={0} /> // play first
    <Animate end={{ opacity: 0.5 }} sequnceIndex={1} /> // play second
    <Animate end={{ opacity: 0 }} sequnceIndex={2} /> // play last
  </AnimateGroup>