TweenMaxのアニメーションScrollMagic

Question

TweenMax私はヘッダがTweenMaxとScrollMagicを使用して、ページをスクロールするが、アニメーションがスクロールを待たずにトリガさにサイズが縮小しようとしていますScrollMagic

前に実行する前に。ここで

私のコードです：

$(document).ready(function(){ 
 
    var header = $('header') 
 

 
    //init the controller 
 
    var controller = new ScrollMagic.Controller(); 
 
    var tween = TweenMax.to(header ,1 ,{height: 100}); 
 
    var scene = new ScrollMagic.Scene({ 
 
     triggerElement: header 
 
    }) 
 
    .setTween(tween) 
 
    .addTo(controller); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #e95849; 
 
    font-family: sans-serif; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
ul:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
li { 
 
    float: right; 
 
    color: #000; 
 
    padding: 20px 10px; 
 
} 
 

 
header { 
 
    background-color: #fff; 
 
    height: 150px; 
 
    position: fixed; 
 
    width: 100vw; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> 
 
    <header> 
 
     <nav> 
 
      <ul id="animate"> 
 
       <li>ABOUT</li> 
 
       <li>WORK</li> 
 
       <li>DESIGN</li> 
 
       <li>CONTACT</li> 
 
      </ul> 
 
     </nav> 
 
    </header> 
 

 
    <div style="height: 2000px"></div>

私は次の順序でのスクリプトも持っている -

1. のjQuery
2. TweenMax
3. ScrollMagic

Answer 1

header要素がすでにトリガー位置（=ビューポートの上部）にあるため、スクリプトがトリガーされます。シーンにoffset: 1を追加すると、少なくとも1ピクセル下にスクロールダウンするまで待機します。

$(document).ready(function(){ 
 
    var header = $('header') 
 

 
    //init the controller 
 
    var controller = new ScrollMagic.Controller(); 
 
    var tween = TweenMax.to(header ,1 ,{height: 100}); 
 
    var scene = new ScrollMagic.Scene({ 
 
     triggerElement: header, 
 
     offset: 1 
 
    }) 
 
    .setTween(tween) 
 
    .addTo(controller); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #e95849; 
 
    font-family: sans-serif; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
ul:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
li { 
 
    float: right; 
 
    color: #000; 
 
    padding: 20px 10px; 
 
} 
 

 
header { 
 
    background-color: #fff; 
 
    height: 150px; 
 
    position: fixed; 
 
    width: 100vw; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> 
 
    <header> 
 
     <nav> 
 
      <ul id="animate"> 
 
       <li>ABOUT</li> 
 
       <li>WORK</li> 
 
       <li>DESIGN</li> 
 
       <li>CONTACT</li> 
 
      </ul> 
 
     </nav> 
 
    </header> 
 

 
    <div style="height: 2000px"></div>

（何が好きにその値を変更します）