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