Animating multiple scenes in a sequence with ScrollMagic

Question

I am trying to rebuild this intro effect using ScrollMagic and GSAP: http://airnauts.com Notice how the intro 'slides' (with text) show and dissappear one after another when scrolling.

Basically, I have set up a stage controller, a scene (the containing div - '.hero-unit') and some tweens for the animation. However, I just can't get the hang of how to animate each slide (three in total) in such a order:

You enter the website and start scrolling.
The first slide is animated (using the staggerFromTo method).
When the slide is fully animated, lower its opacity back to 0 (or move it out of the screen or whatever).
Show the second slide, as in 2.
Same as 3. and so on.

I tried everything that I managed to find as a solution on the internet. I tried using 'TimelineMax', tried hiding the slides when done animating them with onComplete, but nothing seems to work. Here's the code I have so far:

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

To recap: how does one manage to stage different scenes and change between them with a nice transition while scrolling??

Okay, so I figured it out on my own. You have to use TimelineMax (or Lite I guess) and set up the different scenes movement relatively, using delays as such: — Georgi B. Nikolov, Feb 03 '15 at 19:36

score 4 · Accepted Answer · edited May 23 '17 at 11:45

Improving on your answer I would like to add that you can add the tweens to the timeline successively and they will automatically be added to the end of the timeline.

So a better way for your animation code would be:

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

This way the code is a lot more managable in case you want to add anything at any time. For more information check http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/

If all you want to do is add a .to tween to the end of the timeline you can make this even more concise by making use of the TimelineMax.to() method.
From GSAP Docs:

Adds a TweenLite.to() tween to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.to(...) ) but with less code.

So this would make this the best possible GSAP animation code for your purposes:

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

score 1 · Answer 2 · answered Feb 03 '15 at 19:37

Okay, so I figured it out on my own. You have to use TimelineMax (or Lite I guess) and set up the different scenes movement relatively, using delays as such: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);

Using delays like that actually defeats the purpose of using Timeline. The idea of Timeline is so that tweens animate sequentially automatically without having to delay each tween to wait for another. And so that when you adjust the duration of a tween, you don't need to change the delay in all the subsequent ones. Anyway Jan is doing it in the correct way. — ADTC, Dec 12 '15 at 19:01

Animating multiple scenes in a sequence with ScrollMagic

2 Answers2