Jump to content
GreenSock

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

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

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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:

 

See the Pen YzXzBOd?editors=0010 by snorkltv (@snorkltv) on CodePen

  • Like 3

Share this post


Link to post
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 :(

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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!!! :)

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×