スクロールマジックを使用したTweenアニメーション

Question

私はスクロールマジックには全く新しいので、シーンやトゥイーンに慣れるだけです。だから私は、それは基本的に2つのセクションで、かなり基本的なセットアップ

<section id="sectionPlaceholder" class="section"> 
</section> 
<section id="sectionOne" class="section"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" id="imageOne"> 
     </div> 
     <div class="col-md-6"> 
     <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" id="imageTwo"> 
     </div> 
    </div> 
    </div> 
</section> 

を持っています。最初のものはプレースホルダセクションですので、アニメーショントリガを見ることができます。 2番目のセクションには、2つの画像が並べて表示されます。各セクションには、スクロールダウンしたときに、アニメーションはあなたがsectionOneを打った後にトリガされ、min-height:100vh;

は、私はあなたが見ることができるようCodepen

にこののレプリカを作成しました。アニメーションは正しいです、私は本質的に同じ速度で画像のサイズを変えたいと思います。間違っているのは、アニメーションがセクションをヒットするとすぐにすぐに実行されるということです。

私はこれを後にしています。セクションにヒットすると、アニメーションがトリガーされます。セクションを下にスクロールすると、画像が拡大します。セクションの一番下に達すると、スケールは1.2になります。言い換えれば、アニメーションは、セクションの一番下に達するとすぐに完了し、すぐには実行されません。

その後、スクロールバックすると逆の処理が行われます。

上記が意味をなさないことを望みます。私が本質的に探しているのは、画像がスクロールによって制御されるということです。スクロールしていくほど、画像が大きくなります。

どうすればこのようなことができますか？

おかげ

Answer 1

あなたはtriggerElement後duration設定を追加することができ、私はこの例で行ったように、あなたは、たとえば、期間として、ウィンドウの高さを使用することができます。

https://codepen.io/anon/pen/WZZWJX

：

$(function() { 
    var controller = new ScrollMagic.Controller(); 

    var scene = new ScrollMagic.Scene({ 
    triggerElement: "#sectionOne", 
    duration: jQuery(window).height() 
    }) 
    .setTween("#imageOne", 0.5, {scale: 1.2}) 
    .addTo(controller); 

    var scene = new ScrollMagic.Scene({ 
    triggerElement: "#sectionOne", 
    duration: jQuery(window).height() 
    }) 
    .setTween("#imageTwo", 0.5, {scale: 1.2}) 
    .addTo(controller); 
}); 

ここでアクションでそれを参照してくださいだろう、あなたの場合には