【问题标题】：TweenMax Animating before ScrollMagicScrollMagic 之前的 TweenMax 动画
【发布时间】：2016-07-08 05:49:08
【问题描述】：

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>

我也有以下顺序的脚本-

jQuery
TweenMax
滚动魔法

【问题讨论】：

标签： jquery css animation gsap

【解决方案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>

【讨论】：