Nextjsでgsapアニメーションの検証

Nextjsでgsapアニメーションの検証

<概要>

Technologies

Next.jsTailwind CSS

複数の画像がスクロールに応じて段階的に重なりながら固定される「カードスタック型」の表現を実装。

主な実装内容

・各要素の残り枚数に応じてピン固定の期間を動的に計算

・scrub制御によるスクロール速度に追従した滑らかなアニメーション

・実案件での採用を見据え、視覚的なインパクトと実装の保守性のバランスを意識

<キャプチャー>