概要
採用フローなどのステップを、進捗サークルと画像マスク出現で見せる縦フローと、スクロールで重なっていくスタッキングカードを組み合わせた、ストーリー性のあるスクロール演出。
使用技術
・GSAP + ScrollTrigger
・CSS `position: sticky`、`clip-path`、`aspect-ratio`
実装ポイント
・進捗サークルは `stroke-dasharray`/`stroke-dashoffset` を `scrub` でスクロールに紐付けて描画
・各ステップは `clip-path` のポリゴンを開いて画像をワイプ表示し、画像ズームアウトとテキストの `stagger` 出現をタイムラインで連結
・`onEnter`/`onLeaveBack` でステップ番号表示と `is-active` クラスを切り替え
・画像だけ別の `scrub` トリガーで `y` を動かしパララックスを付与
・スタッキングカードは `position: sticky` で吸着させ、下のカードほど `scale`・`opacity`・`blur` を落として奥行きを表現
コアスニペット
// 進捗サークルを stroke-dashoffset で描画（scrubでスクロール連動）
gsap.to(circle, {
strokeDashoffset: 0,
ease: "none",
scrollTrigger: {
trigger: ".flow-contents",
start: "top center",
end: "bottom center",
scrub: 0.5,
},
});
// clip-path ワイプ + 画像ズームアウト + テキスト stagger をタイムラインで連結
tl.to(mask, {
clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)",
duration: 1,
ease: "power4.out",
})
.to(img, { scale: 1, duration: 1.5, ease: "power2.out" }, "<")
.from(texts, { y: 30, opacity: 0, stagger: 0.1, ease: "power3.out" }, "-=0.5");