ScrollTrigger pin header and stack cards

[NickMasliy]

Hello,

I sat on this task for several days and got confused. I watch many scroll triggers demos, but i can't put it all together.  

I need to pin image at the top of screen and stack cards at the rest space. I try, but it doesn't work as expect.

 

 

 

I appreciate any advices.

Thanks,

Nick

See the Pen ExOKWrJ by n1colashka (@n1colashka) on CodePen

[Carl]

thanks for the demo. this was a fun little challenge. not sure of all the requirements and I imagine this can be tackled a few ways.

hopefully this works as a starting point.

 

See the Pen dyQMZjq?editors=0010 by snorkltv (@snorkltv) on CodePen

 

Note

• cards natively have position absolute in css and are stacked on top of each other at y:0
• i use js to distribute them vertically (index * 200)
• the timeline animates them all back to y:0 (their normal position)
• all cards are 200px tall

[NickMasliy]

2 hours ago, Carl said:

thanks for the demo. this was a fun little challenge. not sure of all the requirements and I imagine this can be tackled a few ways.

hopefully this works as a starting point.

 

 

 

 

Note

• cards natively have position absolute in css and are stacked on top of each other at y:0
• i use js to distribute them vertically (index * 200)
• the timeline animates them all back to y:0 (their normal position)
• all cards are 200px tall

Thank you so much, it's really help me:)