Jump to content
GreenSock

sukjae

stagger is adding 0.5 seconds to total duration

Go to solution Solved by mvaneijgen,

Recommended Posts

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

  • Solution

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

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?

image.thumb.png.7a9ae511d40c2a978f5fef1a80371534.png

image.png

Link to comment
Share on other sites

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 

 

 

 

 

  • Like 3
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.
√ó