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>