Jump to content
GreenSock

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

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

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • sosilver changed the title to Sequencing based on a the total percentage completed by a labeled tween
  • Solution

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

 

 

  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 3
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.
×