Entrance animation – Gsap

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<style>
  .loading-screen {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #1d1d1d;
   color: #000;
   pointer-events: none;
     overflow: hidden;
     z-index: 9999;
}

.counter {
  position: fixed;
  right: 10%;
  bottom: 45%;
  display: flex;
  height: 36px;
  font-size: 36px;
  line-height: 64px;
  clip-path: polygon(0 0, 100% 0, 100% 100px, 0 100px);
  font-weight: 500;
    color: #e0e0e0;
    font-family: "Montserrat", "sans-serif";
    overflow: hidden;
}

.counter-1,
.counter-2,
.counter-3,
.counter-4{
  position: relative;
  top: -15px;
    
}

.num1offset1 {
  position: relative;
  right: -10px;
}

.num1offset2 {
  position: relative;

}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 10px;
  transform: translate(-50%, -50%);
  display: flex;
  background: #2f2f2f;
/* 	overflow: hidden; */
}
    

.loader-1 {
  position: relative;
  background: #ff9d05;
  width: 100%;
    overflow: hidden;
}


.bar {
  height: 10px;
}

    @media screen and (max-width: 768px){
        .num1offset1 {
  		right: 0px;
        }
        
        .counter {	
            bottom: 43%;
            height: 32px;
            font-size: 32px;
            line-height: 64px;
        }
        
    }
    

  </style>


<div class="loading-screen">
      <div class="loader">
        <div class="loader-1 bar"></div>
        <div class="loader-2 bar"></div>
      </div>
      <div class="counter">
        <div class="counter-1 digit">
          <div class="num">0</div>
          <div class="num num1offset1">1</div>
        </div>
        <div class="counter-2 digit">
          <div class="num">0</div>
          <div class="num num1offset2">1</div>
          <div class="num">2</div>
          <div class="num">3</div>
          <div class="num">4</div>
          <div class="num">5</div>
          <div class="num">6</div>
          <div class="num">7</div>
          <div class="num">8</div>
          <div class="num">9</div>
          <div class="num">0</div>
                    
        </div>
        <div class="counter-3 digit">
          <div class="num">0</div>
          <div class="num">1</div>
          <div class="num">2</div>
          <div class="num">3</div>
          <div class="num">4</div>
          <div class="num">5</div>
          <div class="num">6</div>
          <div class="num">7</div>
          <div class="num">8</div>
          <div class="num">9</div>
                    
        </div>
                <div class="counter-4 digit">
          <div class="num">%</div>
          
                    
        </div>
      </div>
    </div>

    <!-- -->
  <script>
        
    

    document.addEventListener("DOMContentLoaded", function () {
        const counter3 = document.querySelector(".counter-3");

        for (let i = 0; i < 2; i++) {
          for (let j = 0; j < 10; j++) {
            const div = document.createElement("div");
            div.className = "num";
            div.textContent = j;
            counter3.appendChild(div);
          }
        }
        const finalDiv = document.createElement("div");
        finalDiv.className = "num";
        finalDiv.textContent = "0";
        counter3.appendChild(finalDiv);

        function animate(counter, duration, delay = 0) {
          const numHeight = counter.querySelector(".num").clientHeight;
          const totalDistance =
            (counter.querySelectorAll(".num").length - 1) * numHeight;
          gsap.to(counter, {
            y: -totalDistance,
            duration: duration,
            delay: delay,
            ease: "power2.inOut",
          });
        }

        animate(counter3, 2.8);
             animate(document.querySelector(".counter-4"), 1.8);
        animate(document.querySelector(".counter-2"), 2.8);
        animate(document.querySelector(".counter-1"), 0.8, 1.8);
            
      });

      gsap.to(".digit", {
        top: "-150px",
        stagger: {
          amount: 0.25,
        },
        delay: 2.8,
        duration: 0.7,
        ease: "power4.inOut",
      });

            gsap.from(".loader-1", {
        width: 0,
        duration: 2.8,
        ease: "power2.inOut",
      });

      gsap.to(".loader", {
        background: "none",
        delay: 2.8,
        duration: 0.7,
      });

            gsap.to(".loader", {
        width: "250%",
        duration: 0.7,
        delay: 2.8,
        ease: "expo.inOut",
      });
        
        gsap.to(".loader-1", {
            
        width: "250%",
        duration: 0.7,
        delay: 2.8,
        ease: "expo.inOut",
      });
        
            gsap.to(".loader", {
        scale: 500,
        duration: 0.7,
        delay: 3.3,
        ease: "power2.inOut",
      });
        
      gsap.to(".loader", {
        duration: 1,
        delay: 3.3,
        ease: "expo.inOut",
      });
        
        gsap.to(".test", {
                width: "6px",
        duration: 1,
        delay: 3.5,
        ease: "expo.inOut",
      });
        
      gsap.to(".loading-screen", {
        top: "-100%",
        duration: 0.7,
        delay: 3.8,
        ease: "expo.inOut",
      });

     
    </script>