How to create a navigation scroll-to-section effect with GSAP in Elementor

<ul class="progress-bar">
    <li><a href="#section1">Intro</a></li>
    <li><a href="#section2">Characteristics</a></li>
    <li><a href="#section3">Communication</a></li>
    <li><a href="#section4">Whiskers</a></li>
  </ul>

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


<script>

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(".section").forEach((section, i) => {
  gsap.to(section, {
    scrollTrigger: {
      trigger: section,
      start: "top 70%",
      end: "bottom 70%",
      toggleClass: {
        targets: gsap.utils.toArray(".progress-bar li")[i], // Ensure it's inside .progress-bar
        className: "active"
      }
    }
  });
});

</script>

/* Restrict transition effects to .progress-bar */
.progress-bar *,
.progress-bar *::before,
.progress-bar *::after {
  transition: all ease 0.1s;
}

/* Sidebar */
#sidebar {
  width: 15%;
  height: 100vh;
  padding: 1rem;
}
/*
/* Progress Bar */
.progress-bar {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 2px solid white;
  border-radius: 2rem;
  padding: 1rem;
  cursor: pointer;
}

/* Content */
.content {
  position: relative;
  max-width: 100%;
  padding: 0;
}

.section {
  height: 100vh;
}

/* Restrict link styles to only .progress-bar */
.progress-bar a {
  text-decoration: none;
  color: black;
  /*color: inherit;*/
  opacity: 0;
  text-wrap: nowrap;
  display: block;
}


/* Restrict li styles to .progress-bar */
.progress-bar li {
  list-style: none;
  width: 1rem;
  height: 1rem;
  background-color: white;
  border-radius: 1rem;
}

.progress-bar li:hover {
  background-color: darkgrey;
}

.progress-bar:hover li {
  width: 100%;
  height: 100%;
  padding: 0.5rem 1rem;
}

.progress-bar li.active {
  background-color: yellow;
}

.progress-bar:hover a {
  opacity: 1;
}

/* Responsive Styles */
@media screen and (max-width: 800px) {
  #sidebar {
    display: none;
  }
  .content {
    max-width: 100%;
  }
  main {
    padding: 0 5%;
  }
  .section {
    height: auto;
  }
}