Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

get progress of a child timeline and master timeline

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

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

You guys are awesome in terms of Library and support. 

  • Like 1
Link to comment
Share on other sites

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 ;)

  • Like 2
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

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

  • Like 1
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.