html - 如何使 Tweenmax 动画仅适用于特定视口？

Question

我是 tween max 的新手，在我的项目中，我使用 tween max 和滚动魔法。它的水平滚动，我有五个不同的部分。所以对于每个部分，我添加了不同类型的补间最大动画，这些动画只有在我到达视口时才会起作用。但是现在当我刷新页面本身时，所有部分的动画都可以正常工作。如果我滚动到动画已经完成的特定部分。如何解决这个问题？

这是我的补间最大代码：（这仅适用于第二部分）

var controller = new ScrollMagic.Controller();
var tl7 = new TimelineMax();
tl7.from("#section02 #title2", 0.5,{y:10, opacity:0, ease: Sine.easeIn});
tl7.from("#section02 #trigger--title2", 0.3,{y:10, opacity:0, ease: Sine.easeIn});
tl7.from("#choose1 span", 0.3,{y:10, opacity:0, ease: Sine.easeIn});

var scene = new ScrollMagic.Scene({
  triggerElement:"#section02",
  triggerHook: "onEnter"
})
.setClassToggle('#section02', 'animate')
.reverse(true)
.setTween(tl7)
.addTo(controller);

我的 HTML：

   <div class="wrapper" id="js-wrapper">
    <div class="sections" id="js-slideContainer">
      <section class="section" id="section01">
        <span class="section__title" id="title1">Section One</span>
        <span id="trigger--title1"></span>
      </section>
      <section class="section" id="section02">
        <span class="section__title" id="title2">Section Two</span>
        <span id="trigger--title2">sub</span>
      </section>
      <section class="section" id="section03">
        <span class="section__title" id="title3">Section Three</span>
        <span id="trigger--title3"></span>
      </section>
      <section class="section" id="section04">
        <span class="section__title" id="title4">Section Four</span>
        <span id="trigger--title4"></span>
      </section>
    </div>
  </div>

作为参考，我包含了 Codepen URL - https://codepen.io/sankarsam/pen/MWKBYwJ

如果有人知道这一点，请帮助我。

标签： htmlscrollmagicgsap