Author Stack Overflow

How it looks

Basically the way this works is divs will alternate coming in from the left and right of the screen. This is something you have probably seen on many high quality websites and though of it as difficult but it is actually very easy I will show you both a jQuery version as well as a React version.

Jquery code

This is an alternating side coming in transform

I regularly use this code in my applications to add a little motion to the page, but I obviously can't use Jquery in react so I will also show a react version below

---

Html Code

<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>

CSS Code

body {
 overflow-x: hidden;
}
.box-wrapper {
 -webkit-transition-duration: 600ms;
 transition-duration: 600ms;
}
.box-wrapper.loading:nth-child(odd) {
 transform: translate(100%);
}
.box-wrapper.loading:nth-child(even) {
 transform: translate(-100%);
}

Javascript Code

$(".box-wrapper").each(function (index, element) {
 setTimeout(function () {
   element.classList.remove("loading");
 }, index * 600);
});

React Code

javascript

// Your entry component: App

import React, { useEffect, useState } from "react";

const App = () => {
  const boxArray = ["Box1", "Box2"];
  return (
    <>
      {boxArray.map((box, index) => {
        return <WrapperItem box={box} timeout={index * 600} key={index} />;
      })}
    </>
  );
};

const WrapperItem = ({ box, timeout }) => {
  const [loadingClass, setLoadingClass] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoadingClass(false);
    }, timeout);
  }, [timeout]);

  return (
    <div className={`boxWrapper ${loadingClass ? "loading" : ""}`}>
      <div className="box">
        <p>{box}</p>
      </div>
    </div>
  );
};

export default App;

css

/* Place this in index.css */

body {
  overflow-x: hidden;
}
.boxWrapper {
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}
.boxWrapper.loading:nth-child(odd) {
  transform: translate(100%);
}
.boxWrapper.loading:nth-child(even) {
  transform: translate(-100%);
}