Jump to content
Search Community

How to set the total duration of "stagger" equal to the duration of the animation?

goodwin74 test
Moderator Tag

Recommended Posts

How to set the total duration of "stagger" equal to the duration of the animation?

For example, if there is an unknown number of characters in the text, which is animated using "stagger". If you set "stagger" = 0.2s, and the animation duration is set to 1 second, then with 5 characters the animation will complete in 1 second. And if there are more characters, then the animation will last more than 1 second.
How to make the animation always be 1 second, and "stagger" he calculated the time by dividing the duration of the animation by the number of characters?
So to say, making an adaptive "stagger" that adapts to the duration of the animation.

Link to comment
Share on other sites

Use the amount property inside a stagger object.

 

Quote

amount [number]: The total amount of time (in seconds) that gets split up among all the staggers. So if amount is 1 and there are 100 elements that stagger linearly, there would be 0.01 seconds between each tween's start time. If you prefer to specify a certain amount of time between each tween, use the each property instead. A negative amount will invert the timing effect which can be very handy. So {amount:-1, from:"center"} would cause staggers to go from the outer edges in toward the center.

 

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

 

 

  • Like 4
Link to comment
Share on other sites

7 minutes ago, OSUblake said:

Use the amount property inside a stagger object.

charsArr = text.split(''); //We divide the text into characters

Set amount = charsArr.length ? Or how to use it?

 

I tried to do it, but the animation is now several times larger than it was :(

Link to comment
Share on other sites

12 minutes ago, Carl said:

Although Blake is right that amount will make each subtween start within 1 second, if you want to make sure that they all finish within a specific amount of time you can change the duration() after the stagger is created like this:

var tl = gsap.timeline();
tl.to(charsArr,{duration:0,y:'+='+(curObjText.size*2)})
      tl.to(charsArr,{ease: "power1.out",duration:durationAnimS,y:'-='+(curObjText.size*2), stagger:0.1}).duration(durationAnimS);
      tl.to(charsArr,{ease: "power1.in",delay:durationAnimM,duration:durationAnimE,y:'+='+(curObjText.size*2)});

durationAnimS = 0.32s

But the animation is done in 2.4 seconds :(

 

Edited by goodwin74
update
Link to comment
Share on other sites

17 minutes ago, Carl said:

Although Blake is right that amount will make each subtween start within 1 second, if you want to make sure that they all finish within a specific amount of time you can change the duration() after the stagger is created like this:

 

If amount is 1 and duration is 1, that should be 2 seconds for everything. Adding those numbers should give you the total duration.

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

47 minutes ago, goodwin74 said:

For example, if there is an unknown number of characters in the text, which is animated using "stagger". If you set "stagger" = 0.2s, and the animation duration is set to 1 second, then with 5 characters the animation will complete in 1 second. And if there are more characters, then the animation will last more than 1 second.

No, the duration of the overall animation would be 4 * 0.2 + 1, so a total of 1.8 seconds from the time the very first element started tweening until the final one is done animating. 

 

49 minutes ago, goodwin74 said:

How to make the animation always be 1 second, and "stagger" he calculated the time by dividing the duration of the animation by the number of characters? So to say, making an adaptive "stagger" that adapts to the duration of the animation.

Let GSAP do the math for you. No need to complicate things. If you want ALL of the staggering to be spread out over the course of 1 second, and each individual tween to take 2 seconds (for a total of 3 seconds from when the first element begins animating to when the last one finishes), it'd be like:

 

gsap.to(characters, {
  ...
  duration: 2,
  stagger: {
    amount: 1 // split 1 second between all characters!
  }
});

Does that clear things up? 

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

12 minutes ago, GreenSock said:

No, the duration of the overall animation would be 4 * 0.2 + 1, so a total of 1.8 seconds from the time the very first element started tweening until the final one is done animating.

 

Let GSAP do the math for you. No need to complicate things. If you want ALL of the staggering to be spread out over the course of 1 second, and each individual tween to take 2 seconds (for a total of 3 seconds from when the first element begins animating to when the last one finishes), it'd be like:

 


gsap.to(characters,  { 
  ...duration:  2 ,stagger:  {amount:  1  // split 1 second between all characters!
  }
});

Does that clear things up?

 

Oh, I get it! Now I divided the duration in half and everything worked out. Here's how:

 tl.to(charsArr,{duration:0,y:'+='+(curObjText.size*2)})
        .to(charsArr,{ease: "power1.out",duration:durationAnimS*0.5,y:'-='+(curObjText.size*2), stagger:{amount:durationAnimS*0.5}}).
        to(charsArr,{ease: "power1.in",delay:durationAnimM,duration:durationAnimE,y:'+='+(curObjText.size*2)});

Have I done the right thing? Now the animation takes 0.32 seconds, as it should be (durationAnimS = 0.32)

Thank you very much!!! :)

Link to comment
Share on other sites

12 minutes ago, OSUblake said:

 

If amount is 1 and duration is 1, that should be 2 seconds for everything. Adding those numbers should give you the total duration.

Thank you very much OSUblake! I now realized that they add up, and the total duration is twice as long. Now I divided the "duration" and the "amount" in half and everything worked out!

  • 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.
×
×
  • Create New...