Stage positioning issue with ScrollMagic

Question

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:

var scene = new ScrollMagic.Scene({triggerElement: "#how-it-works", duration: 4000}) .setPin(".stage") .addTo(controller) .setTween(scrollAnimation);

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?

Here's a codepen with my animation - http://codepen.io/BillKroger/pen/bwNXZV (make sure to scroll down)

Any help with this is greatly appreciated!

Answer 1

Ok I was able to figure it out - I ended up wrapping the stage/graphics inside of an additional container, and gave it relative positioning with a top property. Then for the Javascript I just added an offset to the scene instance, making sure it's equal to the top position property applied to the new container. Here's all of the changes:

HTML:

<div class="stage-wrapper">  <!-- new container -->
   <div class="stage">
      <div class="svg-image"></div>
      <div class="svg-image"></div>
      <div class="svg-image"></div>
   </div>
</div>

CSS:

.stage-wrapper {
   position: relative;
   top: 300px;
}

Javascript:

var scene = new ScrollMagic.Scene({
   triggerElement: "#how-it-works", 
   duration: 4000
})

.setPin(".stage")
.addTo(controller)
.setTween(scrollAnimation);

// add a scene offset amount equal to the top positioning for the new container
scene.offset(300);

Updated Codepen: http://codepen.io/BillKroger/pen/bwNXZV

This is probably not the only way to fix the issue, but the solution above ended up working in my case.