Animating in queue

[WebDeg-Brian]

I'm currently trying to apply react-motion to create a hero header like so:

I want to animate the title, the subtitle and then the button, in a queue (like jQuery.animate()). How do I do that?

[nkbt]

There is no specific option to do such kind of animation. But you can use animated value as a guide (like a percentage) for all other animations. Motion will "animate" one value, then you can derive all the other values based on it.

<Motion defaultStyle={{guide: 0}} style={{guide: spring(3)}}>
  {({guide}) => {
    // 1 will have values 0...1 when guide is 0...1
    const position1 = guide > 1 ? 1 : guide;
    // 2 will have values 0...1 when guide is 1...2
    const position2 = guide <= 1 ? 0 : (
      guide <= 2 ? guide - 1 : 1
    );
    // 3 will have values 0...1 when guide is 2...3
    const position1 = guide > 2 ? guide - 2 : 0;

    // things will slide out from left one by one but faster and faster at the end (as part of single spring motion)
   // if you want to actually have 3 separate effects, you can use local component state and start transition when previous one is completed using `onRest` or just checking if `guide` is close to 1. There are many ways...
    return (
      <>
        <div style={{left: -1000 + position1 * 1000}}>sliding from left first</div>
        <div style={{left: -1000 + position2 * 1000}}>sliding from left second</div>
        <div style={{left: -1000 + position3 * 1000}}>sliding from left third</div>
      </>
    )
  }}
</Motion>

That may seem like a weird way of doing animations, but it actually is very powerful and flexible

Hope that might help

[WebDeg-Brian]

Thank you, that helps!