Stagger in list items - but only above 'the fold' and then immediately set the rest

[sheriffderek]

I have a few long calendar-like pages.

 

I'd like to stagger the list items/calendar-day cards in, but ideally - only the cards the user would see would need animation. The 200+ other cards below the fold could be set to their default properties straight away behind the scenes. Figuring out how many cards are in view and how many are out of view and creating a timeline with two tweens on 2 different arrays could work - but if the user scrolls down the page mid-timeline, it would reveal the big secret. Before I start playing with intersection observers or hacking it with multiple viewport heights worth of elements... I'm curious if there's already a gsap way of doing things like this.

See the Pen bGzqxbq by perpetual-education (@perpetual-education) on CodePen

[mvaneijgen]

Hi @sheriffderek have you seen ScrollTrigger.batch()? It sounds like exactly what you're looking for. 

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

 

Hope it helps and happy tweening!