GSAP code not working when scrolling

Community resources General
1

Hello, I am quite new to Webflow, so please bare with me with the explanation of the problem.

I am trying to build a landing page which essentially will start with three big heading which on scroll will animate.

I have two codes in this file, one for snapping the sections smoothly when scrolled down and one for scroll trigger animations, the latter is the one I am having issues with.

Screenshot 2024-04-05 at 16.39.19
Screenshot 2024-04-05 at 16.39.19336×530 20.7 KB

In the embed I have place the code for the scrolling snap sections which affects the three section below. I also set the main wrapper’s overflow (scroll-snap-wrapper) to scroll which allows me to have the snapping effect.

I have noticed when the snapping effect is deactivated by setting the overflow to visible the scroll trigger animation works perfectly. Otherwise it does not. Or at least it, only works for the first heading on load page then when scrolled the other headings are not even visible

Here are the codes;

Scroll trigger code

<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
<script>
window.addEventListener("DOMContentLoaded", (event) => {
  // Split text into spans
  let typeSplit = new SplitType("[text-split]", {
    types: "words, chars",
    tagName: "span"
  });

  // Link timelines to scroll position
  function createScrollTrigger(triggerElement, timeline) {
    // Reset tl when scroll out of view past bottom of screen
 ScrollTrigger.create({
      trigger: triggerElement,
      start: "top bottom",
      onLeaveBack: () => {
        timeline.progress(0);
        timeline.pause();
      }
    });
    // Play tl when scrolled into view (80% from top of screen)
    ScrollTrigger.create({
      trigger: triggerElement,
      start: "top 80%",
      onEnter: () => timeline.play()
    });
  }
</script>`Preformatted text`

Snap page code

<style>
.scroll-snap-wrapper-2 {
	scroll-snap-type: y mandatory;
}
.section-1 {
	scroll-snap-align: start;
}
.section-2 {
	scroll-snap-align: start;
}
.section-3 {
	scroll-snap-align: start;
}
.scroll-snap-wrapper-2 {
    -ms-overflow-style: none;
    scrollbar-width: none;
		}
.scroll-snap-wrapper-2::-webkit-scrollbar { 
    display: none;
}
</style>

Some help would be very helpful, thanks in advance!