Pre Loader animation with javascript with GSAP

[juexvoid]

<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: #D8D8D8;
color: #000;
pointer-events: none;
overflow: hidden;
z-index: 9999;
}

.counter {
position: fixed;
left: 150px;
bottom: 150px;
display: flex;
height: 100px;
font-size: 100px;
line-height: 102px;
clip-path: polygon(0 0, 100% 0, 100% 100px, 0 100px);
font-weight: 400;
color: #000;
font-family: "Helvetica";
overflow: hidden;
}

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

}

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

.num1offset2 {
position: relative;

}

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


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


.bar {
height: 10px;
}

</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, 5);
animate(document.querySelector(".counter-4"), 2);
animate(document.querySelector(".counter-2"), 6);
animate(document.querySelector(".counter-1"), 2, 4);

});

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

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


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

gsap.to(".loader-1", {
rotate: 90,
// y: -50,
duration: 0.5,
delay: 6,
});

gsap.to(".loader", {
scale: 500,
duration: 1,
delay: 7,
ease: "power2.inOut",
});

gsap.to(".loader", {
duration: 1,
delay: 7,
ease: "power2.inOut",
});

gsap.to(".loading-screen", {
opacity: 0,
duration: 0.5,
delay: 7.5,
ease: "power1.inOut",
});

gsap.to("h1", 1.5, {
delay: 7,
y: -80,
ease: "power4.inOut",
stagger: {
amount: 0.1,
},
});
</script>