Jump to content
GreenSock

Raymond

Members
  • Posts

    3
  • Joined

  • Last visited

Everything posted by Raymond

  1. OSUblake, Jonathan, Rodrigo and Carl, Thank you all. I am enlightened and grateful for your help. Raymond
  2. Hi Jonathan, Both of your examples draw a progress bar from top to bottom. How do I make a progress bar drawn from bottom to top? I am new to Greensock obviously. Thank you very much for your patience and help. Raymond
  3. 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; }
×