Search code examples
javascriptgsapscrollmagic

Multiple tweens in one scene


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

Solution

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