TweenMax: cancel animation if element is not in view of browser window

Question

How to set TweenMax and ScrollTrigger compatibility so that the animation happens when the element is visible in the browser window?

demo

code

<div class="box"></div>
<div class="gsap">
   <div class="gsap-item"></div>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.box {
  background-color: royalblue;
  width: 100%;
  height: 150vh;
}

.gsap {
  padding: 40px;
  height: 200vh;
  background-color: greenyellow;
}

.gsap-item {
  background-color: #000;
  width: 100px;
  height: 100px;
}

TweenMax.from(".gsap-item", 1.5, {
      opacity: 0.5,
      backgroundColor: "#f2f2f2",
      y: -40,
      ease: Power3.easeInOut,
      scrollTrigger: ".gsap-item",
    }, 0.5)