TweenMax Оживляющего перед тем ScrollMagic

Question

TweenMax запущен до ScrollMagic

Я пытаюсь сделать заголовок уменьшаться в размерах на прокрутку страницы с помощью TweenMax и 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 к сцене - это заставит его ждать, пока вы прокрутите хотя бы один пиксель. (Изменить это значение, что вам нравится)

$(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>