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.

RE: @b-xb 's psuedo code, Here is a CodePen with that idea in action for anyone who comes across this like I did. http://codepen.io/sheriffderek/pen/VPVoVa