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

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!

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

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

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

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

 

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

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

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

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.