goodwin74 Posted February 7, 2020 Share Posted February 7, 2020 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 More sharing options...
OSUblake Posted February 7, 2020 Share Posted February 7, 2020 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 4 Link to comment Share on other sites More sharing options...
Carl Posted February 7, 2020 Share Posted February 7, 2020 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 3 Link to comment Share on other sites More sharing options...
goodwin74 Posted February 7, 2020 Author Share Posted February 7, 2020 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 More sharing options...
goodwin74 Posted February 7, 2020 Author Share Posted February 7, 2020 (edited) 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 February 7, 2020 by goodwin74 update Link to comment Share on other sites More sharing options...
OSUblake Posted February 7, 2020 Share Posted February 7, 2020 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. 2 1 Link to comment Share on other sites More sharing options...
GreenSock Posted February 7, 2020 Share Posted February 7, 2020 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? 2 1 Link to comment Share on other sites More sharing options...
goodwin74 Posted February 7, 2020 Author Share Posted February 7, 2020 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 More sharing options...
goodwin74 Posted February 7, 2020 Author Share Posted February 7, 2020 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now