Don't understand why simple Greensock animation doesn't run

Question

I'm following along this tutorial: https://ihatetomatoes.net/greensock-timelinelite-tutorial

My code pen so far (only at about 1/4 of the tutorial): http://codepen.io/Chiz/pen/qOxVvm

Based on the JS code, the 3 boxes should run right? I compare the code in the tutorial article and it's the same. I wonder if there's errors in the tutorial code.

Another thing is: the JQuery UI slider should show up below the 3 boxes, but nothing shows up in mine although I'm very sure the JQuery UI slider code is correct.

Any ideas?

// 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

It is not supposed to be t1 but it is supposed to be tl.

Change:

t1 = new TimelineLite();

to:

tl = new TimelineLite();