css - 不明白为什么简单的Greensock动画不运行

Question

我正在学习本教程:https://ihatetomatoes.net/greensock-timelinelite-tutorial

到目前为止我的代码笔(只在教程的 1/4 左右): http://codepen.io/Chiz/pen/qOxVvm

根据 JS 代码，这 3 个盒子应该可以运行吧？我对比了教程文章中的代码，是一样的。请问是不是教程代码有错误。

另一件事是:JQuery UI slider 应该显示在 3 个框下方，但我的没有显示任何内容，尽管我非常确定 JQuery UI slider 代码是正确的。

有什么想法吗？

// 1. Create a variable
var $box = $("#box"),
  $box2 = $("#box2"),
  $box3 = $("#box3"),
  t1 = new TimelineLite();

tl.from($box, 1, {
    y: '-=40',
    autoAlpha: 0,
    ease: Power4.easeInOut
  }) // no comma or semi-colon
  .from($box2, 1, {
    y: '-=40',
    autoAlpha: 0,
    ease: Power4.easeInOut
  }) // no comma or semi-colon
  .from($box3, 1, {
    y: '-=40',
    autoAlpha: 0,
    ease: Power4.easeInOut
  });


// 4. Create a Slider to Control Playback
$("#slider").slider();

// updateSlider function
function updateSlider() {
  $("#slider").slider("value", tl.progress() * 100);
}

html,
body {
  height: 100%;
}
body {
  background-color: #262626;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
}
h1 {
  font-size: 16px;
  width: 300px;
  color: #838484;
  font-weight: 300;
  text-align: center;
  span {
    color: #89c540;
  }
  strong {
    color: #fff;
  }
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,
  -180px);
  padding:10px 20px;
  border:1px solid transparentize(white,
  .7);
}
.box {
  background-color: #88ce02;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-155%, -50%);
  z-index: 1;
}
#box2 {
  transform: translate(-50%, -50%);
}
#box3 {
  transform: translate(55%, -50%);
}
.boxSmall {
  position: absolute;
  background-color: #70a40b;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 75px;
  z-index: 2;
}
.boxTiny {
  background-color: #577a14;
  height: 50px;
  bottom: 0;
  right: 0;
  left: auto;
  z-index: 3;
}
#controls {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 310px;
  transform: translate(-50%, 120px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">



<h1><strong>Green<span>Sock</span></strong> - TimelineLite</h1>
<div id="box" class="box">
  <div class="boxSmall"></div>
  <div class="boxSmall boxTiny"></div>
</div>
<div id="box2" class="box">
  <div class="boxSmall"></div>
  <div class="boxSmall boxTiny"></div>
</div>
<div id="box3" class="box">
  <div class="boxSmall"></div>
  <div class="boxSmall boxTiny"></div>
</div>

<div id="controls">
  <div id="slider"></div>
</div>

Answer 1

它不应该是 t1 但它应该是 tl。

改变:

t1 = new TimelineLite();

到:

tl = new TimelineLite();