Jump to content
GreenSock

ronnieb

Creating a progress bar...

By ronnieb, in GSAP. Views: 10,099

Recommended Posts

Posted

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
Posted

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

  • Like 2
Link to comment
Share on other sites
Posted

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.

  • Like 2
Link to comment
Share on other sites
  • Author
Posted

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

  • Like 1
Link to comment
Share on other sites
  • 1 year later...
Posted

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
Posted

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

 

:)

  • Like 2
Link to comment
Share on other sites
Posted

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
Posted

  • OSUblake, Jonathan, Rodrigo and Carl,

     

    Thank you all.  I am enlightened and grateful for your help.

 

Raymond

 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account