harunpehlivan
3/19/2018 - 2:04 PM

TweenLite Tween Numeric Property

TweenLite Tween Numeric Property

html, body {
  height: 100%;
}

body {
  background-color:#1d1d1d;
  font-family: "Asap", sans-serif;
  color:#989898;
  margin:10px;
  font-size:16px;
}


p{
  line-height:22px;
  margin-bottom:16px;
  width:650px;
}

#demo {
  
}

#scoreDisplay {
  font-size:40px;
  text-align:center;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>
var demo = {score:0},
    scoreDisplay = document.getElementById("scoreDisplay");

//create a tween that changes the value of the score property of the demo object from 0 to 100 over the course of 20 seconds.
var tween = TweenLite.to(demo, 20, {score:100, onUpdate:showScore})

//each time the tween updates this function will be called.
function showScore() {
  scoreDisplay.innerHTML = demo.score.toFixed(2);
}
<link href='https://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>

<div id="demo">
  <div id="scoreDisplay"></div>
</div>