React: Sliding Animation and Conditional Rendering

Question

I'm creating a React.JS Web App for educate myself. I want to create something like that: https://dribbble.com/shots/5311359-Diprella-Login. Here is my sandbox: https://codesandbox.io/s/login-register-znvxjc?file=/src/components/App.jsx Now, in the example I linked there is a sliding animation between the card and the Login/Register part. I did try to make it with transform and order. But I couldn't make it. Can someone help me, please?

App.jsx

  function App() {
  const [isChanged, setIsChanged] = React.useState(false);
  const [whatOrder, setOrder] = React.useState(false);

  return (
    <div className="appContainer">
      <div>{isChanged ? <Register /> : <Login />}</div>
      <div>
        <SlidingCard
          isChanged={isChanged}
          setIsChanged={setIsChanged}
          whatOrder={whatOrder}
          setOrder={setOrder}
        />
      </div>
    </div>
  );
}

export default App;

SlidinCard.jsx

function SlidingCard({ isChanged, setIsChanged }) {
  const loginPaheseTexts = {
    title: "Hello, Friend!",
    description: "Enter your personal details and start jurney with us.",
    button: "Sign Up"
  };

  const registerPhaseTexts = {
    title: "Welcome Back",
    description:
      "To keep connecting with us please login with your personal info.",
    button: "Sign In"
  };

  const texts = isChanged ? registerPhaseTexts : loginPaheseTexts;

  function handleClick(event) {
    console.log("Handle click");
    setIsChanged(!isChanged);
  }

  return (
    <div className={"sliding-card"}>
      <h1>{texts.title}</h1>
      <p>{texts.description}</p>
      <button onClick={handleClick}>{texts.button}</button>
    </div>
  );
}

export default SlidingCard;

Login.Jsx

function Login() {
  return (
    <div className="loginContainer">
      <div className="loginChildContainer">
        <h1>Welcome Back!</h1>
        <p>Lorem lorem lorem lorem lorem</p>
        <Input type="text" placeholder="Username" />
        <Input type="password" placeholder="Password" />
        <button type="submit">Sign In</button>
      </div>
    </div>
  );
}

export default Login;

Register.jsx

function Register() {
  return (
    <div className="registerContainer">
      <h1>Create Account</h1>
      <button>
        <FacebookIcon />
      </button>
      <button>
        <GoogleIcon />
      </button>
      <button>
        <TwitterIcon />
      </button>
      <Input type="text" placeholder="Username" />
      <Input type="text" placeholder="email" />
      <Input type="password" placeholder="Password" />
      <button type="submit">Sign In</button>
    </div>
  );
}

export default Register;

Css

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

input {
  display: block;
  margin: 1rem auto 1rem auto;
}

.App {
  font-family: sans-serif;
}

.appContainer {
  display: flex;

  border: solid 5px black;
}

.loginContainer {
  position: relative;
  display: inline-block;
  border: solid 2px red;
}

.registerContainer {
  position: relative;
  display: inline-block;
  border: solid 2px blue;
}

When I try to make it with transform components jump our of the parent div and not making the correct sliding. When I try with the order, they switch positions right but there is not sliding animation. I'm waiting for your answers.

React: Sliding Animation and Conditional Rendering

0 Answers0