Splash Screen

index.js

import logo from "./logo.svg";
import "./App.css";
import { useEffect, useRef, useState } from "react";

function App() {
  const [state, setstate] = useState(40);
  const dot1 = useRef();
  const dot2 = useRef();
  const dot3 = useRef();
  const container = useRef();
  useEffect(() => {
    RegisterDotsAnimations(dot1, container, 1100, "30px");
    RegisterDotsAnimations(dot2, container, 1000, "50px");
    RegisterDotsAnimations(dot3, container, 1200, "30px");
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <div
          style={{
            fontWeight: "bold",
            fontSize: 100,
            position: "relative",
            marginLeft: 10,
            marginRight: 10,
            padding: "0 30px",
          }}
        >
          <div
            // ref={container}
            style={{
              position: "absolute",
              left: 0,
              transition: "10s ease",

              top: 0,
              bottom: 0,
              right: -20,
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-evenly",

              // right: "100%",
            }}
          >
            <Dot dot={dot1} color={"#3e1152"} size={30} />
            <Dot dot={dot2} color={"#e71f77"} size={30} />
            <Dot dot={dot3} color={"#28c3b2"} size={30} />
          </div>
          <div
            ref={container}
            style={{
              position: "absolute",
              top: 0,
              left: 0,
              right: 0,
              zIndex: 3,
              bottom: 0,
              backgroundColor: "#282c34",
              transition: "1s ease",
            }}
          />
          <span>TRAFFIC DIGITAL</span>
        </div>
      </header>
    </div>
  );
}

const RegisterDotsAnimations = (
  dot,
  container,
  delay = 1000,
  size = "40px"
) => {
  const height = dot.current.style.height;
  const width = dot.current.style.width;
  setTimeout(() => {
    dot.current.parentElement.children[0].style.width = "100%";
    dot.current.style.width = "400px";
    dot.current.style.height = size;
    container.current.style.left = "100%";
  }, delay);
  setTimeout(() => {
    dot.current.style.transition = ".7s ease";

    dot.current.style.width = width;
    dot.current.style.height = height;
    dot.current.style.backgroundColor = "black";
  }, delay + 600);
};

export default App;

function Dot({ dot, container, size, color }) {
  return (
    <div
      style={{
        width: "100%",
        display: "flex",
        zIndex: 9,
        marginRight: "100%",
      }}
    >
      <div style={{ width: 0, transition: "1.5s ease" }} />
      <div
        ref={dot}
        style={{
          width: size,
          transition: "1s ease",
          height: size,
          borderRadius: size,
          backgroundColor: color,
        }}
      />
    </div>
  );
}