Javascript 使用ScrollMagic在序列中设置多个场景的动画

我正在尝试使用ScrollMagic和GSAP重建这个介绍效果：注意介绍“幻灯片”（带文本）在滚动时是如何一个接一个地显示和显示的

基本上，我已经为动画设置了一个舞台控制器、一个场景（包含div-“.hero单元”）和一些tweens。但是，我无法掌握如何按这样的顺序为每张幻灯片（总共三张）制作动画：

您进入网站并开始滚动

第一张幻灯片已设置动画（使用参差FromTo方法）

幻灯片完全设置动画后，将其不透明度降低回0（或将其移出屏幕或其他任何位置）

显示第二张幻灯片，如图2所示

与3相同。 等等

我尝试了所有我在互联网上找到的解决方案。我尝试使用“TimelineMax”，尝试在使用onComplete设置幻灯片动画时隐藏幻灯片，但似乎没有任何效果。以下是我目前掌握的代码：

var pinOrigin = {
                opacity: 0
            };
            var pinEnd = {
                opacity: 1,
                yoyo: true,
                ease: Back.easeOut
            }

            var tl = TweenMax.staggerFromTo('.hero-unit .scene:first-of-type', 1, {opacity:0}, {opacity: 1});

            var pin = new ScrollScene({
                triggerElement: '.hero-unit',
                triggerHook: 'onLeave',
                duration: 1000
            }).setPin('.hero-unit').setTween(tl).addTo(controller);

---

重述一下：如何在滚动时通过一个很好的过渡来安排不同的场景并在它们之间切换？？？

好的，所以我自己解决了这个问题。您必须使用TimelineMax（或者我猜是Lite）并相对地设置不同的场景运动，使用延迟：a

var tl = new TimelineMax().add([
                    TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 1}),
                    TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 0, delay: 1}),
                    TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:1, delay: 2}),
                    TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:0, delay: 3}),
                    TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:1, delay: 4}),
                    TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:0, delay: 5})
                ]);

            var pin = new ScrollScene({
                triggerElement: '.hero-unit',
                triggerHook: 0,
                duration: 2000
            }).setPin('.hero-unit').setTween(tl).addTo(controller);

改进我想补充的是，你可以将二者依次添加到时间线中，它们将自动添加到时间线的末尾

因此，制作动画代码的更好方法是：

var tl = new TimelineMax()
    .add(TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 1}))
    .add(TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 0}))
    .add(TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:1}))
    .add(TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:0}))
    .add(TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:1}))
    .add(TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:0}));

这样，如果您想在任何时候添加任何内容，代码就更易于管理。 有关更多信息，请查看

如果您只想在时间线的末尾添加一个.to tween，您可以通过使用使其更加简洁。
从GSAP文档：

将TweenLite.to（）tween添加到时间线的末尾（或在其他地方使用“position”参数）-这是一种方便的方法，可以完成与add（TweenLite.to（…）完全相同的操作，但代码更少

因此，这将使其成为最适合您的GSAP动画代码：

var tl = new TimelineMax()
    .to('.hero-unit .scene:first-of-type', 1, {opacity: 1})
    .to('.hero-unit .scene:first-of-type', 1, {opacity: 0})
    .to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:1})
    .to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:0})
    .to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:1})
    .to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:0});

---

好吧，我自己想出来了。你必须使用TimelineMax（或者我猜是Lite），相对地设置不同的场景移动，使用延迟：使用这样的延迟实际上违背了使用Timeline的目的。时间轴的概念是让两个孩子自动按顺序动画，而不必延迟每个孩子等待另一个孩子。因此，当你调整一个tween的持续时间时，你不需要改变所有后续的延迟。无论如何，简是用正确的方式做的。