How to stagger a scrub animation

[alx]

Hey all! 

This feels like it should be simple enough to do and yet I can't figure it out or find an answer in the forums. 

When you scroll down, the bars scale up until they reach their full height at the end of the 'body'. What I want to simply do is have them 'stagger' on scrub, or if you will, each bar, starting from the left one, begins to scale up only when the previous bar has finished. I can imagine doing this with a scrubbed timeline, but is there an easier way?

 

See the Pen LEPGGRK by alxhrrs (@alxhrrs) on CodePen.

[akapowl]

Hello there, @alx

Just put the stagger where it belongs - on the vars object, not on the scrollTrigger object - and you should be good to go already.
 

1 hour ago, alx said:

This feels like it should be simple enough to do and yet I can't figure it out or find an answer in the forums. 

From my experience, the best places to look for answers on general issues like this, usually are the docs and other ressources like the 'Getting Started' articles.

https://gsap.com/resources/getting-started/Staggers/

I hope this will help. Cheers.

See the Pen dPbGMYO by akapowl (@akapowl) on CodePen.

[alx]

whaaaaaat?! Well don't I look like a goof. Yeah that's exactly what I wanted. I can't believe it was that simple. I'd never put the stagger on the vars. Thanks so much!