get progress of a child timeline and master timeline

[Fahim]

I have seen an awesome nesting of timeline by carl in the mentioned code pen 

 

if some one can add a progress to it then it will great.

 

a 5px div in height and and say 200px width is filled with colour when the timeline progress

 

i would like to see separate for child timeline and master time line.

 

i have seen many jqueryui example and dragrable ones also but don't see any simple  js example which uses tween.set to fill a div with colour with timeline onUpdate 

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

[Carl]

Hi,

 

I modified the demo to show that each timeline (including the master / parent timeline) can have its progress illustrated by its own progress bar.

Basically each timeline uses an onUpdate callback to achieve this. Each timeline passes 2 parameters to the setProgress function on each update

 

1: a reference to itself (the timeline being updated) via "{self}" keyword

2: a reference to the progress bar that should be updated based on the progress of "{self}"

 

var progressBars = $(".progress") // lookup and cache all .proggres elements


//create 3 timelines


//note each timeline calls onUpdate which is a function that needs 2 parameters:
//    a reference to the timeline "{self}"
//    a reference to the progress bar 
//    note progressBars[1] is the second element in the jQuery collection $(".progress")
var box1Timeline = new TimelineLite({
  onUpdate:setProgress, 
  onUpdateParams:["{self}", progressBars[1]]
});


box1Timeline.to("#box1", 1, {rotation:360})
.to("#box1", 1, {opacity:0})


//same approach for 2nd and third timeline

var box2Timeline = new TimelineLite({onUpdate:setProgress, onUpdateParams:["{self}", progressBars[2]]});
box2Timeline.to("#box2", 1, {top:100})
.to("#box2", 1, {opacity:0})

var box3Timeline = new TimelineLite({onUpdate:setProgress, onUpdateParams:["{self}", progressBars[3]]});
box3Timeline.to("#box3", 1, {rotation:-360})
.to("#box3", 1, {opacity:0})

//note the master timeline also uses onUpdate to control the red progress bar

var masterTimeline = new TimelineMax({
  repeat:20, 
  repeatDelay:1, 
  onUpdate:setProgress, 
  onUpdateParams:["{self}", progressBars[0]]
});




//master timeline resets all progressBars to scaleX:0


masterTimeline.set(progressBars, {scaleX:0, transformOrigin:"left"})
  .add(box1Timeline)
  .add(box2Timeline)
  .add(box3Timeline)


// setProgress() takes parameters that tell it 
//   which timeline it's dealing with 
//   which progressBar it needs to adjust


function setProgress (timeline, progressBar){
  TweenLite.set(progressBar, {scaleX:timeline.progress()})
}

 

http://codepen.io/GreenSock/pen/soJai

[Fahim]

Sometimes just saying thanks is not enough. Thanks a ton.

You guys are awesome in terms of Library and support. 

[Carl]

You are very welcome.

Its your support of GreenSock through your membership that makes this level of support and quality of platform all possible, so thank you as well

[Fahim]

Hi Carl,

 

I am still stuck and asking silly question.

 

i have used one of your code pen and tried playing with it. My situation is i have to use mastertimeline.add function and it will be used in loop and all the tween will be added to mastertimline in sequence then i will see what i will do for position parameter. basically i will using .set to unhide then will tween then again hide. i have written the whole program but its a mess.. 

 

To replicate something similar i have used this pen.

 

This doesnt works

  function box1() {

  masterTimeline.add(TweenMax.to("#box1", 1, {rotation: 360}).to("#box1", 1, {opacity: 0}));

  masterTimeline.add(TweenMax.to("#box2", 1, {top: 100}).to("#box2", 1, {opacity: 0}));

  masterTimeline.add(TweenMax.to("#box3", 1, {rotation: -360}).to("#box3", 1, {opacity: 0}));

  }

this also works but only for box1

  function box1() {

    masterTimeline.add(TweenMax.to("#box1", 1, {rotation: 360}).to("#box1", 1, {opacity: 0}).to("#box2", 1, {top: 100}).to("#box2", 1, {opacity: 0}).to("#box3", 1, {rotation: -360}).to("#box3", 1, {opacity: 0}));

  }

 

The progress bar also starts from middle.

 

code pen is here 

See the Pen ofJsm by osricmacon (@osricmacon) on CodePen

[Fahim]

Never mind i got what i was looking i confused myself.