Trying to animate SVG with GSAP, but getting js error

Design help Animations & Interactions
1

https://ecoshift-a7931d-3eeb658156c6e56a2856d0e.webflow.io/

Hello, I am new to Webflow. I am testing it out with my team. I think it is important to note, that this is a Figma to Webflow transfer (which we have not yet perfected) and that for now I am ignoring everything else on the site design wise, and just trying to test the functionality of SVG animations in Webflow.

We have a large SVG in the second section of the page. I have been trying to animate it, but nothing works. I even restructured the code many times, and thought that maybe instead of two functions I should try putting everything into one. However, I still get the following error:

TypeError: Cannot read properties of undefined (reading ‘add’)

Does anyone have an idea of what this could be? I currently have the following code after many edits:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
	markers: true
});

//paragraph animations. This is animating FROM a particular element. So the animation will happen in order from top to bottom
$(".logo-split-grid").each(function () {
  let triggerElement = $(this);
  let targetElements = triggerElement.find(".split-list-item"); // Select .split-list-item inside current .logo-split-grid
	
  console.log(triggerElement);
  console.log(targetElements);
  
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: triggerElement,
      start: "top bottom",
      end: "bottom center",
      scrub: 1
    }
  });

  // Iterate over each target element
  targetElements.each(function (index, element) {
  
  console.log("index: " + index);
  console.log("Element: " + element);
  console.log("trigger element: " + triggerElement);
  // if we were to change the "from" to "to", then the animation would happen in reverse.
    tl.from(element, {
      yPercent: 10,
      opacity: 0,
      duration: 0.3,
      scrollTrigger: {
        trigger: triggerElement,
        start: 'top bottom',
        once: true
      },
    });
  });
	console.log(triggerElement);
  let targetElements2 = document.getElementsByClassName("large-logo-svg");

      // Progressively enhance animation
      // Animation will be only triggered if JS is loaded on the page
      	targetElements2.classList.add('gsap-loaded');
        console.log(targetElements2);

      let animationSequence = gsap.timeline({
        scrollTrigger: {
          trigger: triggerElement,
          start: 'center bottom',
          // The SVG will be given this clrolled into view
          // It will also be given this class if the section was already scrolled pass on page load
          toggleClass: 'has-been-scrolled',
          once: true
        }
      });
});
</script>

Here is my public share link: LINK
(how to access public share link)