I am trying to rebuild this intro effect using ScrollMagic and GSAP: 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:

1. You enter the website and start scrolling.
2. The first slide is animated (using the staggerFromTo method).
3. When the slide is fully animated, lower its opacity back to 0 (or move it out of the screen or whatever).
4. Show the second slide, as in 2.
5. 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??

I am trying to rebuild this intro effect using ScrollMagic and GSAP: http://airnauts. 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:

1. You enter the website and start scrolling.
2. The first slide is animated (using the staggerFromTo method).
3. When the slide is fully animated, lower its opacity back to 0 (or move it out of the screen or whatever).
4. Show the second slide, as in 2.
5. 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??

• javascript
• gsap
• scrollmagic

• 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 Commented Feb 3, 2015 at 19:36

2 Answers 2

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./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 acplishes 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});

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