title: How do I animate bottom AND opacity attribute in GSAP and ScrollMagic?
body: <p>With the following code I am able to stagger animate the position and fade the text in. But what I'd like to accomplish is to move, fade in, <strong>and then</strong> fade all copy back to 0 by end of scroll. So moving is working fine. I  just want the same <code>&lt;p&gt;</code> tags to fade in then back out by end of scroll.</p>
  
  <pre><code>// init controller to hold all commands/animations
  const controller = new ScrollMagic.Controller({ addIndicators: true });
  
  const tween1 = TweenMax
    .staggerTo('#parallax p', 1, {
      bottom: $('#parallax').height(),
      opacity: 1,
    }, 0.06);
  
  // All commands/animations live in a scene
  new ScrollMagic.Scene({
    // Element to watch
    triggerElement: '#parallax',
    // Point at which animation starts, default is center of screen
    triggerHook: 0, // 1 onEnter, .5 onCenter (Defualt), 0 onLeave
  })
  .setPin('#parallax')
  .setTween(tween1)
  .duration('100%') // Percentage of full screen or hard-wired number of pixels
  .addIndicators({ name: 'FADES' }) // Indicators marked on screen
  .addTo(controller); // Add this scene to controller
  </code></pre>
  
  <p>Side question: If the animation is keyed to scroll through ScrollMagic, what is the <code>1</code> for in the following line: <code>.staggerTo('#parallax p', 1, {</code>? </p>
  
  <p>Edit: More appropriate <a href="https://codepen.io/LayneSmith/pen/yXEOxq" rel="nofollow noreferrer">CodePen added</a></p>