SELECTION 01

前のカードは固定される

スクロールしても、このカードは画面に貼り付いて止まります。次のカードがやってくるまで、ここで待機。

SELECTION 02

次が下からせり上がって重なる

前のカードの上に、覆いかぶさるように登場。トランプを重ねていくような積み上がり方が生まれます。

SELECTION 03

下のカードは少し縮んで奥へ

覆われる側を scale で少し小さくすると、奥に下がったように見えて立体感が出ます。ここだけGSAPの仕事。

SELECTION 04

仕組みは sticky + scale だけ

重なり自体はCSSの position: sticky。GSAPは奥行きの縮小を足すだけ。派手に見えて、タネはシンプルです。