gsap slideUp/slideDown functionality

gsap.css

body{
  background-color:black;
  height:100%;
  margin:10px;
}



.box{
position:relative;
width:100px;
height:100px;
color:black;
font-size:30px;
line-height:100px;
text-align:center;
background: #9af600;
  overflow:hidden;
}

gsap.html

<div class="box" id="box1">GSAP</div>
<button>slide</button>

gsap.js

var t = TweenLite.to("#box1", 0.5, {height:0, paused:true, reversed:true});

$("button").on("click", function() {
  if (t.reversed()) {
    t.play();
  } else {
    t.reverse();
  }
});