title: Stage positioning issue with ScrollMagic
body: <p>I created an animation using GreenSock and ScrollMagic which is working great, but I can't figure out how to adjust the initial position of the stage/graphics (before the user triggers the animation). Currently, I am calling the .setPin method on a container element with the class of 'stage'. This stage element is inside of a larger parent container (#how-it-works) which is the triggerElement for the animation:</p>
  
  <p><code>
  var scene = new ScrollMagic.Scene({triggerElement: "#how-it-works", duration: 4000})
      .setPin(".stage")
      .addTo(controller)
      .setTween(scrollAnimation);
  </code></p>
  
  <p>The issue I'm having is that the stage element is initially "stuck" at the top of the parent container, and I would like for it to just be vertically centered within the parent container prior to the animation being triggered. I tried adjusting the 'top' CSS property on the .stage element, but this required me to use !important and it produces strange results. Are there some parameters/arguments that specifically control the positioning of a pinned element in ScrollMagic?</p>
  
  <p>Here's a codepen with my animation - <a href="http://codepen.io/BillKroger/pen/bwNXZV" rel="nofollow">http://codepen.io/BillKroger/pen/bwNXZV</a> (make sure to scroll down)</p>
  
  <p>Any help with this is greatly appreciated!</p>