Jump to content
Search Community

get progress of a child timeline and master timeline

Fahim test
Moderator Tag

Go to solution Solved by Carl,

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

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

Link to comment
Share on other sites

  • Solution



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({
  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({
  onUpdateParams:["{self}", progressBars[0]]

//master timeline resets all progressBars to scaleX:0

masterTimeline.set(progressBars, {scaleX:0, transformOrigin:"left"})

// 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()})



  • Like 4
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

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

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