一个场景中的多个补间

Question

我对使用 Scrollmagic 的 GSAP 还很陌生，我想在一个场景中做多个补间，但不知道怎么做，所以我最终做了 3 个这样的场景。

            // init controller
            var controller = new ScrollMagic.Controller();

            // build scene
            var scene1 = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
            })
            .setTween("#animate1", 0.4, {
                opacity: 1, 
                left: 0
            })
            .reverse(false)

            var scene2 = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
            })
            .setTween("#animate2", 0.4, {
                opacity: 1, 
                left: 0,
                delay: .4
            })
            .reverse(false)

            var scene3 = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
            })
            .setTween("#animate3", 0.4, {
                opacity: 1, 
                left: 0,
                delay: .8
            })
            .reverse(false)

            //.addTo(controller);
            controller.addScene([
                scene1,
                scene2,
                scene3
            ]);

有没有办法简化这段代码？我想添加更多，但我觉得有一个简短的方法来写这个？

提前致谢！

最终代码

            var timeline = new TimelineMax();

            var tween1 = TweenMax.to("#animate4", .5, {
                opacity: 1,
                top: 0
            });
            var tween2 = TweenMax.to("#animate5", .5, {
                opacity: 1,
                top: 0
            });
            var tween3 = TweenMax.to("#animate6", .5, {
                opacity: 1,
                top: 0
            });

            var scene = new ScrollMagic.Scene({
                triggerElement: "#trigger2"
            });

            //.addTo(controller);
            //controller.addScene([
            //  scene4
            //]);

            timeline.add(tween1).add(tween2).add(tween3);
            scene.setTween(timeline)
            scene.addTo(controller);

Answer 1

您可以使用时间轴向场景添加多个补间

var timeline = new TimelineMax();
var tween1 = TweenMax.from("#animate1", 1, {opacity: 1, left:0});
var tween2 = TweenMax.to("#animate2", 1, {opacity:1, left:0, delay:0.4});

timeline.add(tween1).add(tween2);

scene.addTween(timeline);

如果你想让多个项目一个接一个出现，你可以使用stagger

TweenMax.staggerTo(".myclass", 0.5, {opacity:0, y:-100, ease:Back.easeIn}, 0.1);

一个场景中的多个补间

Multiple tweens in one scene

javascript

scrollmagic

gsap