Jump to content
Search Community

Creating a progress bar...

ronnieb test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

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

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...

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

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

  • 9 years later...
On 5/26/2013 at 2:46 AM, Rodrigo said:

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:

 

 

 

Hope this helps,

Cheers,

Rodrigo.

 

Hi, I'm trying the quoted code.

function progressBarUpdate(tween) {
  console.log(tween.progress())
}

const tl = gsap.timeline({
  delay: 1,
  onUpdate: progressBarUpdate,
});
tl
  .add(animate())
  .add(reveal(), 'reveal')
  .add(start())

 

The timeline itself works perfectly. I just added onUpdate: progressBarUpdate and the function, and I get this error:

Quote

Uncaught TypeError: Cannot read properties of undefined (reading 'progress')
    at Timeline.progressBarUpdate [as _onUpdate]

The problem comes from this line console.log(tween.progress())

 

Any idea?

Link to comment
Share on other sites

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...