title: Animating multiple scenes in a sequence with ScrollMagic
body: <p>I am trying to rebuild this intro effect using ScrollMagic and GSAP: <a href="http://airnauts.com" rel="nofollow">http://airnauts.com</a> Notice how the intro 'slides' (with text) show and dissappear one after another when scrolling.</p>
  
  <p>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:</p>
  
  <ol>
  <li>You enter the website and start scrolling.</li>
  <li>The first slide is animated (using the staggerFromTo method).</li>
  <li>When the slide is fully animated, lower its opacity back to 0 (or move it out of the screen or whatever).</li>
  <li>Show the second slide, as in 2.</li>
  <li>Same as 3.
  and so on.</li>
  </ol>
  
  <p>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:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>To recap: how does one manage to stage different scenes and change between them with a nice transition while scrolling??</p>