GSAP Timelineによる画面遷移と、局所パーティクル演出

Visual / Effects

実装ポイント Focus: 「操作の余韻」と「多幸感」を演出するシームレスな遷移設計で、ただ画面を切り替えるのではなく「ボタンを押した瞬間から世界観が変化していく一連のストーリー」を実装しました。
局所的な粉砂糖の表現については、particles.jsを画面全体ではなくボタン幅のコンテナ内のみに限定して描画しています。
また有機的な光（ボケ）の生成は画像素材を使わず、JSによるDOM生成とCSSグラデーションでランダムな光の粒を作成しました。GSAPの stagger でふわっと出現させ、柔らかい多幸感を演出しています。
挑戦 Challenge: 複数のアニメーション要素（ボタン、粉、光、画像遷移）がバラバラに動くと、ユーザーの没入感が途切れてしまいます。
そのためgsap.timeline を使用し前の動作が終わる前に次の動作を開始（オーバーラップ）させることで、途切れのない滑らかな体験を実現しました。
使用技術 Animation: ・HTML / SCSS (BEM設計)
・JavaScript
・GSAP (Timeline, Stagger)
・Particles.js
・CSS Animation
詳細 Details: #GSAP #particles.js