ScrollMagicでのステージ位置決めの問題

Question

GreenSockとScrollMagicを使ってアニメーションを作成しましたが、これはうまくいきましたが、ステージ/グラフィックスの初期位置を調整する方法（ユーザーがアニメーションをトリガする前に）を調整する方法はわかりません。現在、 'stage'のクラスを持つコンテナエレメントの.setPinメソッドを呼び出しています。この段階の要素は、より大きな親コンテナの内部にある（＃どのよう-IT-作品）アニメーションのtriggerElementです：

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

私がいる問題は、ステージ要素が最初に「スタックしているということです親コンテナの一番上にあり、アニメーションがトリガされる前に親コンテナ内で垂直方向にセンタリングされることを望みます。私は.stage要素の 'top' CSSプロパティを調整しようとしましたが、これは私に！importantを使用する必要があり、奇妙な結果を生成します。 ScrollMagicの固定要素の位置を特に制御するいくつかのパラメータ/引数がありますか？

は、ここに私のアニメーションでcodepenだ - http://codepen.io/BillKroger/pen/bwNXZV（スクロールダウンしてください）

これですべてのヘルプは大歓迎です！

Answer 1

私はそれを理解することができました - 私はステージ/グラフィックスを追加のコンテナの中にラップしてしまい、トッププロパティで相対的な位置付けを行いました。その後、Javascriptの場合、シーンインスタンスにオフセットを追加し、新しいコンテナに適用されたトップポジションのプロパティと等しいことを確認しました。ここでは、変更のすべてです：

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); 

更新Codepen：http://codepen.io/BillKroger/pen/bwNXZV

はこれをpこの問題を解決する唯一の方法ではないが、私の場合は上記の解決策が働いてしまった。