Cancel timeline on first scroll

[ChunkyApps]

I have an infinitely repeating timeline that I wish to stop once the user scrolls the page. This seems like it should be easy but I'm stumbling here.

Any ideas?

[ChunkyApps]

My own solution was to get rid of the repeat in the timeline and do a check at the end of the animation. If scrollY is 0 I restart the timeline. It works but I'd still like a timeline repeatIf function.

 

Or better yet, use ScrollTrigger to cancel the timeline animation and hide the element so I don't have to wait until it plays to the end.

 

tlScrollArrow = gsap.timeline()
  .to('#scroll-1', {opacity: 1, duration: 0.3})
  .to('#scroll-1', {y: 20, duration: 2, ease: 'power1.out'}, 0.1)
  .to('#scroll-1', {opacity: 0, duration: 1.5}, 0.4)
  .add( function() {
    if (window.scrollY == 0) {
      tlScrollArrow.restart()
    }
  })

 

Edited August 12, 2021 by ChunkyApps
Clarify my original intention

[OSUblake]

Hi ChunkyApps!

 

You could just use an event listener if this is going to be a one time deal.

window.addEventListener("scroll", stopAnimation);

function stopAnimation() {
  window.removeEventListener("scroll", stopAnimation);
  tlScrollArrow.kill();
}

 

[ChunkyApps]

6 hours ago, OSUblake said:

Hi ChunkyApps!

 

You could just use an event listener if this is going to be a one time deal.

window.addEventListener("scroll", stopAnimation);

function stopAnimation() {
  window.removeEventListener("scroll", stopAnimation);
  tlScrollArrow.kill();
}

 

Thank you. Always  the simplest answer that eludes me. Or the urge to use ScrollTrigger for everything lol!