Sequencing based on a the total percentage completed by a labeled tween

[sosilver]

Hello, I am trying to trigger other tweens to occur based on how far along a specific labeled tween is in its animation. I am animating a line and then revealing three circles. I'd like the circles to begin their animations relative to how far along the line animation has progressed. In this example circle2 begins at 33% and circles 1 and 3 would start at 50%. I don't want to use a time in seconds because the duration of the line animation is going to change and many more elements will be revealed based on how far along the line has animated so its not practical to set values in seconds.

 

You can see in the master timeline that function line1() which returns a timeline is given a "line1" label which I then try to use with buildCircle1 and buildCircle3 to force them to animate when "line1" is 50% complete. I can't get this to work but buildCircle2 works perfectly with the "<33%" syntax.

 

master
.add(setup())
.add(line1(), "line1")
.add(buildCircle2(), "<33%")
.add(buildCircle1(), "line1+=50%")
.add(buildCircle3(), "line1+=50%")

 

I have read the documentation here https://greensock.com/docs/v3/GSAP/Timeline and thought that the example  provided "myLabel+=30%" - 30% of the inserting animation's total duration past the label "myLabel" would work. I might not be understanding it correctly.

 

Could someone be so kind as to explain what I'm doing wrong or possibly provide a more proper solution to my issue. Thank you!

See the Pen ZEKOjoK by rfoost (@rfoost) on CodePen

[akapowl]

Hey @sosilver

 

Those 50% in your 

 

.add(buildCircle1(), "line1+=50%")

 

will refer to the duration of the animation you are adding in - so it would be 50% of the buildCircle1's tl's duration past that label.

 

If you wanted it to be 50% of the duration of the line1 animation, you could do something like this. Does that work for you?

 

function line1() {
  const tl = gsap.timeline();
  tl
    .to('#line1 path', 3, {
    alpha: 1, 
    scale:1, 
    stagger:{
      amount: 3,
      from: 'end',
    }
  });

  line1duration = tl.duration()

  return tl;
}



...



master
.add(setup())
.add(line1(), "line1")
.add(buildCircle2(), "<33%")
.add(buildCircle1(), "line1+=" + line1duration*0.5)
.add(buildCircle3(), "line1+=" + line1duration*0.5)

 

 

 

See the Pen ac1ffb9ad5e4f7a4647cfb334f7e6fe9 by akapowl (@akapowl) on CodePen

 

 

[sosilver]

Hi @akapowl, this works great! I never would have thought to grab the .duration of that tween to make it work. Thank you

[Cassie]

This post and the demos will help you get your head around positioning too!