Multiple tweens in one scene

Question

I'm pretty new to GSAP with Scrollmagic, was trying to do multiple tweens in one scene but couldn't figure out how so I ended up doing 3 scenes like this.

            // 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
            ]);

Is there a way to simplify this code? I am looking to add more but I feel like there is a short way to write this?

Thanks in advance!

Final code

            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);

Weltschmerz

Answer 1

You can use TimeLine to add multiple tweens to a scene

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);

If you want to have multiple items appear one after the other, you can use stagger

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

Haematocryal

Thank you! I incorporated it with MagicScroll and it worked! – Weltschmerz

Any idea how I can make the tweens not repeat when scrolling back? – Weltschmerz

One quick note, scene.addTween(timeline); should be scene.setTween(timeline); – Individuate