Stagger calculations on a scrolltrigger tween

[Michaël Garcia]

Here's a classic tween  :

gsap.to('.element', {
  rotation: 360,
  stagger: 0.5,
  ease: 'none',
  scrollTrigger: {
    trigger: '.container',
    start: 'top top',
    end: 'bottom bottom',
    scrub: true
  }
})

I'd like to understand what are the maths behind the stagger value in this case since the movement will not depend on a duration (scrub: true).

 

What's the correct value for the stagger attribute if I want each element to exactly start moving once the previous one complete its movement ?

- if the stagger value is too low, the movements of several elements overlap

- if the stagger value is too high there will be moments where nothing happens between 2 movements

 

Here's a CodePen. In my example  the correct value of stagger seems to be 0.5

 

I'm looking forward to understand this behavior correctly.

Thank you very much

 

See the Pen ExJyQPW by Micha-l-Garcia (@Micha-l-Garcia) on CodePen

[GreenSock]

Yep, that's because the default duration is 0.5 (you didn't set a duration, so it uses the default). Therefore, if each one animates for 0.5 seconds, and you stagger their start times by 0.5 seconds, that means they'd be perfectly sequenced. If you set the duration to 1 second, then you'd need a stagger of 1 to have them perfectly sequenced. See how it works? 

 

And yes, when you set scrub: true on a ScrollTriggered animation, it just squishes/stretches it to fit perfectly between the start and end scroll positions. 

 

I hope that clears things up. 

[Michaël Garcia]

Okkkkkkkk I'm so glad to eventually know that. 

Basically if I want my elements perfectly sequenced, I need to have the same value for both duration and stagger.

The more I think about it, the more it makes sense.

 

Thank you very much for your time and for your detailed explanations.

[GreenSock]

Yep, exactamundo. Imagine laying those tweens out on a timeline. Just think where each one's start time would be.

 

Happy tweening!