sukjae Posted October 25, 2022 Share Posted October 25, 2022 When only stagger is used, 0.5 is added to the total duration. I wonder where this value is coming from. Check out codepen's t3 example.🙏 See the Pen ZEREOwa?editors=1111 by leesukjae (@leesukjae) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted October 25, 2022 Solution Share Posted October 25, 2022 Hi @sukjae welcome to the forum! The default duration of any tween (if not explicitly defined by you) is 0.5 seconds. All your tweens have a duration: 1 except your t3, so it will get the default duration: 0.5 seconds. I get why if feels weird, but with your logic the duration if not defined would be 0 and an animation that doesn't animate is no fun at all! 🎉 duration The duration of the animation (in seconds). Default: 0.5. See the docs if you want more in depth information https://greensock.com/docs/v3/GSAP/Tween Link to comment Share on other sites More sharing options...
sukjae Posted October 25, 2022 Author Share Posted October 25, 2022 Ah, that's right. Thanks for checking it out. But what does duration mean when used with stagger? The stagger is the interval between each starting point, I don't understand why the duration(duration of tween) is added to the total duration(duration of timeline). If duration is the time of animation for each tween, shouldn't it be ignored if it is less than stagger? Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 25, 2022 Share Posted October 25, 2022 The stagger is the time between the start of the next elements animation, the duration can be multiple times more or less to that duration. This way you can have an animation that takes 5 seconds, but the stagger can start at 1 second in or the other way around. See the Pen KKeKWgy?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Staggers can be really powerful that way. Your illustration reminds me of an amazing video by our own @Carl (second post to day sorry Carl) that really dives deep in what stagger makes possible. Take a look at the stagger docs https://greensock.com/docs/v3/Staggers, there is so much more possible with it 3 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