[Triggers firing all at once within wordpress template]

Hello,

 

Having a bit of an issue with setting up my triggers correctly within a wordpress template . Currently have lotties setup for two sections within the page and having no issues as far as the first section of lotties firing off as directed. However, I do need a little assistance as to how I would go about setting up another trigger to set off the second set of lotties without interference with the first set. Here is the code in which I have in place at the moment:

 

gsap.utils.toArray(".color-blah").forEach((el, i) => {
      const ColorOne = gsap.timeline({
        scrollTrigger: {
          trigger: el,
          onEnter: this.playLottie,
		  start: "top left",
    end: "bottom top",
    markers: true,
        }
      })
     
  });

//FUNCTION PLAY
function playLottie (){
  lottie.play()
};


// PAGE - HOME (GROUP ONE)
const yellow  = lottie.loadAnimation({
  container: document.querySelector('.slide-content_group-one.test-0'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'https://lottie.host/eb1cb11d-87e5-42af-bff2-8c8d8549da0a/XQo1JSHp3Y.json'
});


const red = lottie.loadAnimation({
  container: document.querySelector('.slide-content_group-one.test-1'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'https://lottie.host/95c2b04c-28fd-411f-8add-8cc8380d3399/5FNf1cSzsq.json'
});



const blue = lottie.loadAnimation({
  container: document.querySelector('.slide-content_group-one.test-2'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'https://lottie.host/fb01223d-4298-4acf-a811-a018adc887a9/PMlDJX47Kc.json'
});
</script>

Greatly appreciate any help provided!!