Jquery 卷轴魔术渐弱向上

我有一个非常简单的设置

<section class="section">
    <p>Dummy section</p>
</section>
<section id="inside" class="section">
    <div class="container">
        <div class="row">
              <div class="col-md-4">
                <h3>Some title</h3>
                <br><br><br>
                <p class="section-subtitle">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p>
              </div>
              <div class="col-md-8"></div>
        </div>
    </div>
</section>

从这一点可以看出，这并不完全正确。目前，它正在淡出，而不是进入。此外，它正在越过其正常位置，进入另一部分

有没有办法实现我的目标

---

感谢

要实现所需的不透明度和过渡，您可以在GSAP中使用fromTo-这将在设置元素属性动画之前设置它们的属性

在本例中，我将yPercent设置为100（translateY:100%），将不透明度设置为0.2，然后分别将它们设置为0和1

这是一个演示

var controller = new ScrollMagic.Controller();

var fadein_tween = TweenMax
.fromTo('.section-subtitle', 1, { yPercent:100 , opacity:0.2 }, { yPercent:0 , opacity:1 , ease:Power1.easeInOut  });

var scene = new ScrollMagic.Scene({
  triggerElement: "#inside",
  trigerHook:"onEnter",
  duration: "50%"
})  
.setTween(fadein_tween)
.addTo(controller);

---

这正是我一直在寻找的。

var controller = new ScrollMagic.Controller();

var fadein_tween = TweenMax
.fromTo('.section-subtitle', 1, { yPercent:100 , opacity:0.2 }, { yPercent:0 , opacity:1 , ease:Power1.easeInOut  });

var scene = new ScrollMagic.Scene({
  triggerElement: "#inside",
  trigerHook:"onEnter",
  duration: "50%"
})  
.setTween(fadein_tween)
.addTo(controller);