I have 3 elements in a div and I rigged them to slide in with a 1 second delay with ScrollTrigger, but my scrub is off.

The animation is triggered accordingly when I scroll the element into view. However, I want the animation to reset once I scroll out and to start again if I reach the ScrollTrigger trigger

aboutTags.forEach((aboutTag, index) => {
  gsap.set(aboutTag, {
    xPercent: -20,
    opacity: 0
  });

  gsap.to(aboutTag, {
    scrollTrigger: {
      trigger: about,
      start: 'top 50%',
    },
    delay: index * 1,
    xPercent: 0,
    opacity: 1
  })
})