how to run animation in sequence one by one in react spring

Question

I am using react-spring library, it works for me, what i want to do, i want to run 3 animation in sequence, right now all 3 animation run at a time, can we do it one by one, here i have added my whole code, can anyone please look into it, and help me to resolve that issue ? any help wll be really appreciated. if you have any other animation library can do the same thing, then please let me know

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
    withRouter,
    NavLink
  } from "react-router-dom";
import ScrollToTop from "./scrollToTop";
import App from "./App";
import { useAuth0 } from "@auth0/auth0-react";
import {useSpring, animated} from 'react-spring';
//import { useGesture } from 'react-use-gesture';

const LoginButton = () => {
    const { loginWithRedirect, isAuthenticated, isLoading, error } = useAuth0();
    const scrollingLeft = useSpring({
        from: { transform: "translate(60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true,
        tension:170,
        friction:26,
        mass:1,
      });

      const scrollingRight = useSpring({
        from: { transform: "translate(-60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true,
        tension:170,
        friction:26,
        mass:1,
      });  

      const scrollingCenter = useSpring({
        from: { transform: "translate(-60%,0)" },
        to: { transform: "translate(0,0)" },
        config: { duration: 1000 },
        reset: true,
        tension:170,
        friction:26,
        mass:1,
      });  

      
    console.log('isLoading', isLoading, isAuthenticated, error)
    const isAuth = localStorage.getItem('isAuthenticated')
    console.log('isAuth', isAuth)
    if(!isAuth){
        if (isLoading) {
            return <div>Loading...</div>;
          }
    
        if (!isAuthenticated) {
            loginWithRedirect()
        } else {
            localStorage.setItem('isAuthenticated', isAuthenticated)
        }
    }

   

    


    return (
        <Router>
            <ScrollToTop />
            <Switch>
                <Route path="/app" component={App} />
                <Route path="/" exact>
                    <NavLink to="/app">
                        {" "}
                        
                        <div className="full_width">
                            <animated.div style={scrollingLeft} className="class_1">
                                <img src="https://cloudinary-res.cloudinary.com/image/upload/c_limit,h_540,w_770/f_auto,fl_lossy,q_auto/rzxcje2xocuicsxjevlviw.jpg" />
                            </animated.div>
                            <animated.div style={scrollingRight} className="class_2">
                                <img src="https://cloudinary-res.cloudinary.com/image/upload/c_limit,h_540,w_770/f_auto,fl_lossy,q_auto/rzxcje2xocuicsxjevlviw.jpg" />
                            </animated.div>
                            <animated.div style={scrollingCenter} className="class_3">
                                <table>
                                    <tr>
                                        <th>Header 1</th>
                                        <th>Header 2</th>
                                    </tr>
                                    <tr>
                                        <td>Test 1</td>
                                        <td>Test 2</td>
                                    </tr>
                                    <tr>
                                        <td>Test 1</td>
                                        <td>Test 2</td>
                                    </tr>
                                 </table>                                   
                            </animated.div>
                        </div>

                        <div>
                            <img src="site.png" className="welcome-screen" />
                        </div>
                    </NavLink>
                </Route>
            </Switch>
        </Router>
    );
};

export default LoginButton;

Answer 1

I created an example. I use the onRest property of the useSpring hook. But the onRest is called on each animation endng. So I have to create a component for the second animation. And I only render it when the first animation is finished. I do not put the last animation in a separate component because, we do not use its onRest event. Here is the code:

import React from "react";

import { useSpring, animated } from "react-spring";
//import { useGesture } from 'react-use-gesture';

const ScrollLeft = ({ onRest }) => {
  const scrollingLeft = useSpring({
    from: { transform: "translate(60%,0)" },
    to: { transform: "translate(20%,0)" },
    onRest
  });

  return (
    <animated.div style={scrollingLeft} className="class_1">
      <img src="https://cloudinary-res.cloudinary.com/image/upload/c_limit,h_540,w_770/f_auto,fl_lossy,q_auto/rzxcje2xocuicsxjevlviw.jpg" />
    </animated.div>
  );
};

const ScrollRight = ({ onRest }) => {
  const scrollingRight = useSpring({
    from: { transform: "translate(-60%,0)" },
    to: { transform: "translate(20%,0)" },
    onRest
  });

  return (
    <animated.div style={scrollingRight} className="class_2">
      <img src="https://cloudinary-res.cloudinary.com/image/upload/c_limit,h_540,w_770/f_auto,fl_lossy,q_auto/rzxcje2xocuicsxjevlviw.jpg" />
    </animated.div>
  );
};

const LoginButton = () => {
  const [finished1, setFinished1] = React.useState(false);
  const [finished2, setFinished2] = React.useState(false);

  const scrollingCenter = useSpring({
    from: { transform: "translate(-60%,0)" },
    to: { transform: finished2 ? "translate(0,0)" : "translate(-60%,0)" },
    reset: true,
    tension: 170,
    friction: 26,
    mass: 1
  });

  return (
    <div className="full_width">
      <ScrollLeft onRest={() => setFinished1(true)} />
      {finished1 && <ScrollRight onRest={() => setFinished2(true)} />}
      <animated.div style={scrollingCenter} className="class_3">
        <table>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
          <tr>
            <td>Test 1</td>
            <td>Test 2</td>
          </tr>
          <tr>
            <td>Test 1</td>
            <td>Test 2</td>
          </tr>
        </table>
      </animated.div>
    </div>
  );
};

export default LoginButton;

https://codesandbox.io/s/spring-animations-in-sequence-hjubr