How to create a preloader with counter and an image with GSAP in Elementor

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

<style>
.layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.overlay-content {
  width: 60%;
	
}

.images {
  position: relative;
  height: 50vh;
}

.img-contain {
  position: relative;
  width: 40%;
  height: 100%;
  margin: 0 auto;
  z-index: 1000;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	
}

.img-contain img {
  position: absolute;
  top: 0;
  left: -110%;
}

.text {
  position: relative;
  margin: 1em 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.counter,
.logo p {
  font-size: 10rem;
  text-align: center;
  text-transform: uppercase;
	font-family: "Helvetica Neue", "sans-serif";
	font-weight: 600;
}

.counter p {
  line-height: 100%;
}

.counter p span,
.logo p span {
  position: relative;
  z-index: 9999;
  color: white;
}

.logo {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}

.logo p {
  line-height: 100%;
}

.logo p span {
  position: relative;
  top: 200px;
}
</style>

<div class="layout">
  <div class="overlay-content">
    <div class="images">
      <div class="img-contain">
        <img src="your image" alt="" />
        <img src="your image" alt="" />
        <img src="your image" alt="" />
        <img src="your image" alt="" />
        <img src="your image" alt="" />
        <img src="your image" alt="" />
      </div>
    </div>
    <div class="text">
      <div class="counter"><p>100%</p></div>
      <div class="logo"><p>HELLO</p></div>
    </div>
  </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
  splitTextIntoSpans(".logo p");

  gsap.to(".img-contain img", {
    left: 0,
    stagger: 0.1,
    ease: "power4.out",
    duration: 1.5,
    delay: 4,
  });

  gsap.to(".img-contain img", {
    left: "110%",
    stagger: -0.1,
    ease: "power4.out",
    duration: 1.5,
    delay: 7,
  });
});

function splitTextIntoSpans(selector) {
  var element = document.querySelector(selector);
  if (element) {
    var text = element.innerText;
    var splitText = text
      .split("")
      .map((char) => `<span>${char}</span>`)
      .join("");
    element.innerHTML = splitText;
  }
}

function startLoader() {
  var counterElement = document.querySelector(".counter p");
  var logoElement = document.querySelector(".logo p");
  var currentValue = 0;

  function updateCounter() {
    if (currentValue === 100) {
      animateText();
      return;
    }

    currentValue += Math.floor(Math.random() * 10) + 1;
    currentValue = currentValue > 100 ? 100 : currentValue;
    counterElement.innerHTML =
      currentValue
        .toString()
        .split("")
        .map((char) => `<span>${char}</span>`)
        .join("") + "<span>%</span>";

    var delay = Math.floor(Math.random() * 200) + 100;
    setTimeout(updateCounter, delay);
  }

  function animateText() {
    setTimeout(() => {
      gsap.to(".counter p span", {
        top: "-400px",
        stagger: 0.1,
        ease: "power3.inOut",
        duration: 1,
      });

      gsap.to(".logo p span", {
        top: "0",
        stagger: 0.1,
        ease: "power3.inOut",
        duration: 1,
      });

      gsap.to(".logo p span", {
        top: "-400px",
        stagger: 0.1,
        ease: "power3.inOut",
        duration: 1,
        delay: 3,
      });

      gsap.to(".layout", {
        opacity: 0,
        ease: "power3.inOut",
        duration: 1,
        delay: 4,
      });

    }, 300);
  }

  updateCounter();
}

startLoader();
</script>