Greetings to all.
The attached code draws a green progress bar from top downward. What changes are needed to make the progress bar grow from bottom up ward? Thank you all for your help and advice.
Raymond
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>progress bar text</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="edge_includes/greensock-js/jquery.gsap.js"></script>
<script type="text/javascript" src="edge_includes/greensock-js/TimelineLite.js"></script>
<script type="text/javascript" src="edge_includes/greensock-js/TimelineMax.js"></script>
<script type="text/javascript" src="edge_includes/greensock-js/TweenLite.js"></script>
<script type="text/javascript" src="edge_includes/greensock-js/TweenMax.js"></script>
<script type="text/javascript" src="edge_includes/greensock-js/easing/EasePack.js"></script>
<script type="text/javascript" src="edge_includes/greensock-js/utils/Draggable.js"></script>
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-226720340">
<div id="progressPremium" class="progress green"></div>
</div>
</body>
</html>
var progressGreen = $(".green");
var barHeight = progressGreen.height();
var parentTl = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:1});
function makeTl(num) {
var tl = new TimelineMax();
tl.to(progressGreen, 1, {top:num})
return tl;
}
parentTl.add( makeTl(barHeight) )
.from(progressGreen, parentTl.duration(), {height:0, ease:Linear.easeNone}, 0).timeScale(2);
body{
background-color:white;
}
.progress{
height:100px;
width:15px;
top:150px;
left:20px;
margin-left:20px;
border-style:solid;
border-width:thin;
}
.green{
background-color:green;
}
