Share Posted May 25, 2013 Greetings All, I am a new Greensock user and I absolutely love this code! I have been working on a simple animated mobile website, and I want to include a simple progress bar (not necessarily a slider or scubber) that runs in time with the animation. I have been trying to accomplish this as follows, but it does not work: <script type="text/javascript"> $(window).load(function() { var unleash_tl = new TimelineMax({onUpdate:progressBar}); //slideOne unleash_tl.to("#one", 1, {opacity:1}) .from("#one h1", 1, {top:"-100%", ease:Power4.easeOut}, "-=1.0") .to("#playBtn", 1, {autoAlpha:1}) .call(function() { unleash_tl.pause(); }) //slideTwo .to("#one", 1, {opacity:0}, "slideTwo") .to("#playBtn", 1, {autoAlpha:0}, "-=1") .to("#two", 1, {opacity:1}, "-=1") .from("#two h1", 1, {bottom:"-100%", ease:Power4.easeOut}) .to("#two", 1, {opacity:0, delay:2}) //slideThree .to("#master", 1, {backgroundPosition:"left, top", ease:Power4.easeOut}, "-=0.5") .to("#three", 1, {opacity:1}, "slideThree") .from("#banner-01", 1, {top:"-100%", ease:Power4.easeOut}) .from("#banner-02", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.75") .to("#three", 1, {bottom:"-200%", opacity:0, delay:3}) //slideFour .to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5") .to("#four", 1, {opacity:1}, "-=1", "slideFour") .from("#four h1", 1, {top:"-100%", ease:Power4.easeOut}) .from("#four p", 1, {bottom:"-100%", ease:Power4.easeOut}) .from("#four .ocp-logo", 1, {opacity:0}) .to("#four", 1, {opacity:0, delay:7}) //slideFive .to("#master", 1, {backgroundPosition:"right, bottom", ease:Power4.easeOut}, "-=0.5") .to("#five", 1, {opacity:1}, "slideFive") .from("#banner-03", 1, {left:"-100%", ease:Power4.easeOut}) .from("#banner-04", 1, {left:"500px", ease:Power4.easeOut}, "-=0.75") .to("#five", 1, {top:"-100%", opacity:0, delay:3}) //slideSix .to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5") .to("#six", 1, {opacity:1}, "-=1", "slideSix") .from("#six h1", 1, {scale:0, ease:Power4.easeOut}) .from("#six p", 1, {scale:0, ease:Power4.easeOut}) .from("#six .ocp-logo", 1, {opacity:0}) .to("#six", 1, {opacity:0, delay:7}) //slideSeven .to("#master", 1, {backgroundPosition:"left, top", ease:Power4.easeOut}, "-=0.5") .to("#seven", 1, {opacity:1}, "slideSeven") .from("#window-01", 1, {top:"-100%", ease:Power4.easeOut}) .from("#window-02", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.75") .to("#seven", 1, {bottom:"-200%", opacity:0, delay:3}) //slideEight .to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5") .to("#eight", 1, {opacity:1}, "-=1", "slideEight") .from("#eight h1", 1, {top:"-100%", ease:Power4.easeOut}) .from("#eight p", 1, {bottom:"-100%", ease:Power4.easeOut}) .from("#eight .ocp-logo", 1, {opacity:0}) .to("#eight", 1, {opacity:0, delay:7}) //slideNine .to("#master", 1, {backgroundPosition:"right, bottom", ease:Power4.easeOut}, "-=0.5") .to("#nine", 1, {opacity:1}, "slideNine") .from("#corporate-01", 1, {left:"-100%", ease:Power4.easeOut}) .to("#nine", 1, {top:"-100%", opacity:0, delay:3}) //slideTen .to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5") .to("#ten", 1, {opacity:1}, "-=1", "slideTen") .from("#ten h1", 1, {scale:0, ease:Power4.easeOut}) .from("#ten p", 1, {scale:0, ease:Power4.easeOut}) .from("#ten .ocp-logo", 1, {opacity:0}) .to("#ten", 1, {opacity:0, delay:7}) //slideEleven .to("#master", 1, {backgroundPosition:"left, top", ease:Power4.easeOut}, "-=0.5") .to("#eleven", 1, {opacity:1}, "slideEleven") .from("#magazines-01", 1, {top:"-100%", ease:Power4.easeOut}) .to("#eleven", 1, {bottom:"-200%", opacity:0, delay:3}) //slideTwelve .to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5") .to("#twelve", 1, {opacity:1}, "-=1", "slideTwelve") .from("#twelve h1", 1, {top:"-100%", ease:Power4.easeOut}) .from("#twelve p", 1, {bottom:"-100%", ease:Power4.easeOut}) .from("#twelve .ocp-logo", 1, {opacity:0}) .to("#twelve", 1, {opacity:0, delay:7}) //slideThirteen .to("#master", 1, {backgroundPosition:"right, bottom", ease:Power4.easeOut}, "-=0.5") .to("#thirteen", 1, {opacity:1}, "slideThirteen") .from("#retail-01", 1, {top:"-100%", ease:Power4.easeOut}) .from("#retail-02", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.5") .from("#retail-03", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.5") .from("#retail-04", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.5") .to("#thirteen", 1, {top:"-100%", opacity:0, delay:3}) //slideFourteen .to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5") .to("#fourteen", 1, {opacity:1}, "-=1", "slideFourteen") .from("#fourteen h1", 1, {scale:0, ease:Power4.easeOut}) .from("#fourteen p", 1, {scale:0, ease:Power4.easeOut}) .from("#fourteen .ocp-logo", 1, {opacity:0}) .to("#fourteen", 1, {opacity:0, delay:7}) //slideFifteen .to("#master", 1, {backgroundImage:"none"}, "-=0.5") .to("#fifteen", 1, {opacity:1}) .from("#fifteen h1", 1, {bottom:"-100%", ease:Power4.easeOut}, "-=1.0") .to("#fifteen", 1, {opacity:0, delay:7}) //slideSixteen .to("#sixteen", 1, {opacity:1}, "slideSixteen") .from("#sixteen h1", 1, {scale:0, ease:Power4.easeOut}) .from("#sixteen p", 1, {scale:0, ease:Power4.easeOut}) .from("#ocp-logo-link", 1, {autoAlpha:0}); unleash_tl.timeScale(1.5); $("#playBtn").click(function(){ unleash_tl.play("slideTwo"); }); function progressBar(){ $("#progress_bar").scaleX = unleash_tl.currentProgress; }; }); </script> Not sure if this is the correct method. Any advice would be grealty appreciated. Link to comment Share on other sites More sharing options...
Share Posted May 25, 2013 Hi and welcome to the GreenSock forums. There are 2 ways I'd recommend 1: Just add a tween at the end of the timeline that tweens the scaleX of your progressbar. Make its duration the same duration as the timeline and insert it at the beginning of the timeline 2: use an update callback like you did, but you have to tweak the code for scaling the progress bar a little bit. var redProgress = $(".red"); var tl = new TimelineMax({onUpdate:showRedProgress}); tl.to("#box1", 1, {top:100}) .to("#box2", 1, {top:100, scale:0.5}) .to("#box3", 1, {top:100, rotation:360}) .to("#box4", 1, {top:100, rotation:-360}) //just use a scaleX tween that is the same duration() as the timeline and start it at a time of 0 //this tween must be added last .from(".white", tl.duration(), {scaleX:0, transformOrigin:"0px 0px", ease:Linear.easeNone}, 0); //use a callback function showRedProgress() { TweenLite.set(redProgress, {scaleX:tl.progress(), transformOrigin:"0px 0px"}); } live demo: See the Pen rxFwL by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Share Posted May 26, 2013 Hi, A third way could be a modification of Carl's second proposal. Create a TweenMax.from instance that's paused as a variable and set the progress of that instance with the timeline progress. Like this: var unleash_tl = new TimelineMax({onUpdate:progressBar, onUpdateParams:["{self}"]}), progressBar = TweenMax.from(redProgress, 1, {scaleX:0, paused:true}); /* unleash_tl.... */ function progressBar(tween) { progressBar.progress(tween.progress()); } You can see it working here: See the Pen qaEto by rhernando (@rhernando) on CodePen Hope this helps, Cheers, Rodrigo. 2 Link to comment Share on other sites More sharing options...
Author Share Posted May 26, 2013 Carl & Rodrigo, Excellent solutions. Many thanks to both of you for your prompt attention and thorough explanations. I'm very much looking forward to exploring the possibilities of GSAP! Cheers, Ron 1 Link to comment Share on other sites More sharing options...
Share Posted January 23, 2015 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; } Link to comment Share on other sites More sharing options...
Share Posted January 23, 2015 Hello Raymond.. using See the Pen rxFwL by GreenSock (@GreenSock) on CodePen you could do See the Pen VYWmaV by anon (@anon) on CodePen , and just reverse the width and height values: See the Pen yyXVag by jonathan (@jonathan) on CodePen Also check this that uses scaleY: See the Pen MYobpo by jonathan (@jonathan) on CodePen 2 Link to comment Share on other sites More sharing options...
Share Posted January 24, 2015 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 Link to comment Share on other sites More sharing options...
Share Posted January 24, 2015 Just change the transform-origin y-offset to bottom. TweenMax.set($progressBar, { scaleY:timeline.progress(), transformOrigin: "0px bottom" }); See the Pen KwqqKZ by osublake (@osublake) on CodePen Link to comment Share on other sites More sharing options...
Share Posted January 24, 2015 OSUblake, Jonathan, Rodrigo and Carl, Thank you all. I am enlightened and grateful for your help. Raymond Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now