TweenMax: отмена анимаций, если не в видемости окна браузера

Как настроить чтобы анимация (TweenMax) происходила, когда элемент находится в видимости окна браузера? Может нужна какая-то библиотека для этого?

TweenMax.from(".menu-links ul li", 1.5, {
      opacity: 0,
      x: -40,
      ease: Power3.easeInOut
    }, 0.5)
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

.menu-links ul li {
  height: 200px;
  display: inline-block;
  padding-right: 20px;
  line-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="test"></div>
<div class="menu-links">
        <ul>
          <li>locations</li>
          <li>our menu</li>
          <li>our story</li>
          <li>meet our teem</li>
          <li>own a clean juice</li>
          <li>contact us</li>
        </ul>
      </div>

https://codepen.io/Alexxxsander/pen/abjbvyr


Ответы (0 шт):