basic tween

by Laras intan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<div class="box" id="red"></div>
<div class="box" id="yellow"></div>
<div class="box" id="blue"></div>
<div class="box" id="ocean"></div>
<br><br><br><br>
<div class="count" id="updateOutput"></div>
<div class="count" id="completeOutput"></div>

CSS

.box {
  position: relative;
  float: left;
  width: 10px;
  height: 70px;
}

#red {
  background-color: #cc2a36;
}

#yellow {
  background-color: #ffdb00;
}

#blue {
  background-color: #1e2e4d;
}

#ocean {
  background-color: #7ebac7;
}

.class {
  margin-right:330px;
}

JavaScript

var red = document.getElementById("red"),
  yellow = document.getElementById("yellow"),
  ocean = document.getElementById("ocean"),
  blue = document.getElementById("blue"),
  updateOutput = document.getElementById("updateOutput"),
  completeOutput = document.getElementById("completeOutput"),
  updateCount = 0;

TweenLite.to($(".box"), 2, {
  left: "300px",
  onUpdate: updateHandler,
  onComplete: completeHandler,
  onCompleteParams: ["animation complete!"]
});

function updateHandler() {
  updateCount++;
  updateOutput.innerHTML = "onUpdate fired " + updateCount;
}

function completeHandler(message) {
  completeOutput.innerHTML = "onComplete fired <br/> completeParams = " + message;
}