See a demo here

Installation:

npm i react-animation-stepper

and

import AnimationStepper from "react-animation-stepper";

Usage:

First step

First, you should define an object containing your components to animate, like this:

// Structure:

`<identifier>`: `<component>`

const components = useMemo(
  () => ({
    first: <MyFirstComponent />,
    second: <MySecondComponent />,
  }),
  []
);

This object's keys will act as an identifier for the component, to be referenced later at the steps definition.

Second step

Then, you have to define the steps you want the stepper to follow:

const steps = useMemo(
  () => [
    // first step
    {
      config: {
        style: {
          animationName: "some-animation-defined-in-css-file",
          // extra style properties to apply to your component
          opacity: 0,
        },
        classes: ["some-css-class-defined-in-css-file"],
        keepConfig: true,
      },
      elements: ["first"],
      duration: 500,
    },
    // second step
    {
      config: {
        style: {
          animationName: "some-other-animation",
        },
        classes: ["some-other-css-class"],
        keepConfig: true,
      },
      elements: ["second"],
      duration: 500,
    },
  ],
  []
);

You should wrap this into a useMemo hook if you want to use reloadOnStepsPropChange, otherwise the animation will reset on every re-render.

Third Step

In your child component, set the animationRef ref recieved via props to the html element you want to animate:

const MyFirstComponent = ({ animationRef }) => {
  return (
    <div ref={animationRef}>
      {
        // your components content
      }
    </div>
  );
};

Example:

Automatic step functionality

In this mode, AnimationStepper will reproduce each step in order until completion.

<AnimationStepper steps={steps} components={components} />

Manual step functionality

In this mode, you should manually trigger every step one by one. You can't trigger nextStep until the last step has been completed.

const stepperRef = useRef(null); // define ref to store AnimationStepper's methods

// you advance through steps manually with
// AnimationStepper's nextStep method
stepperRef.current.nextStep();

<AnimationStepper
  steps={steps}
  components={components}
  manualSteps
  stepperRef={stepperRef}
/>;

Step's config

Each step requires a config object. This object defines which styles and classes will be applied to your component.

config: {
  // animation configuration.
}

You can find more information about its properties at Step config's props section.

You can also pass an Object with multiple configurations if you need to define diferent configurations for the components. Use the component's identifier as the key for each config value, like this

:

{
  config: {
    first: {
        // animation configuration.
      },
    second: {
        // animation configuration.
    }
},
// If you use this functionality, you still need to specify
// which elements will act in the current step:
elements: ["first", "second"]
}

AnimationStepper's Props:

Props	Type	Required	Description	Default
steps	Array	✔️	Steps array to execute.	undefined
components	Array	✔️	Components object to animate.	undefined
reloadOnStepsPropChange	Bool	✖️	Determines if steps should restart on steps prop change.	false
update	Any	✖️	Update prop to restart steps on its change.	undefined
stepperRef	Ref	✖️	ref to use along with manualSteps prop. Sets nextStep method to this ref to use in father's component.	undefined
manualSteps	Bool	✖️	Determines if animations should be reproduced automatically. If false, a stepperRef should be provided to acces the nextStep's method from component's father. This prop's change won't trigger a re-render, so you should avoid changing from one mode to another (unless you force a re-render yourself).	false
automaticPlay	Bool	✖️	Determines if the animation should start on automatic mode	true
onEnd	Func	✖️	Callback to be executed on automatic steps play completion	undefined

Step's props:

Props	Type	Required	Description	Default
elements	Array	✔️	Array specifying which elements do act in the step.	undefined
config	Object	✔️	Configuration to be applied to the animated components. See Step config's props.	undefined
duration	Integer	✖️	Duration of the step in miliseconds.	1000
preDelay	Integer	✖️	Delay expressed in miliseconds, applied before the step is reproduced.	undefined
postDelay	Integer	✖️	Delay expressed in miliseconds, applied after the step is reproduced.	undefined

Step config's props:

Props	Type	Required	Description	Default
classes	Array or String	✖️	classNames to be applied at animation. Can be an string, or an Array of Strings.	undefined
styles	Object	✖️	Styles object to be applied at animation step. All styles are accepted except animation and animationDuration. animation will be replaced with animationName. animationDuration is provided through step's duration prop.	undefined
delay	Integer	✖️	Delay applied before executing the animation. Util with a multiple config, to delay the animation between components that act in the same step.	undefined
keepConfig	Bool	✖️	Determines if applied classes and styles should be kept on animation's completion.	false
removePrevAnimations	Bool	✖️	Removes previous classes and styles kept in the previous animation, before applying the new ones.	false