jquery - Stage positioning issue with ScrollMagic -

i created animation using greensock , scrollmagic working great, can't figure out how adjust initial position of stage/graphics (before user triggers animation). currently, calling .setpin method on container element class of 'stage'. stage element inside of larger parent container (#how-it-works) triggerelement animation:

var scene = new scrollmagic.scene({triggerelement: "#how-it-works", duration: 4000}) .setpin(".stage") .addto(controller) .settween(scrollanimation);

the issue i'm having stage element "stuck" @ top of parent container, , vertically centered within parent container prior animation being triggered. tried adjusting 'top' css property on .stage element, required me use !important , produces strange results. there parameters/arguments control positioning of pinned element in scrollmagic?

here's codepen animation - http://codepen.io/billkroger/pen/bwnxzv (make sure scroll down)

any appreciated!

ok able figure out - ended wrapping stage/graphics inside of additional container, , gave relative positioning top property. javascript added offset scene instance, making sure it's equal top position property applied new container. here's of 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 scene offset amount equal top positioning new container scene.offset(300); 

updated codepen: http://codepen.io/billkroger/pen/bwnxzv

this not way fix issue, solution above ended working in case.