制作概要

セクションごとに異なるアニメーションを用いているため、表示タイミングや動きの長さを丁寧に調整し、閲覧者の視線が自然に流れるよう工夫しました。
ファーストビューでは、流れる方向の違う無限スライダーを2つ重ね、タイトルとボタンが段階的に現れるアニメーションを組み合わせることで、サイトを開いた瞬間から視線を引き込む演出を実現しています。
GSAPを用いて前のカードが縮小しながら重なるアニメーション、スクロールに応じて線が伸びるアニメーションなど、動きにメリハリをつける実装を行いました。
FAQ セクションでは、タブ切り替えやアコーディオン、View More ボタンで項目を展開するなど、デザインで指定されていた動きを忠実に再現しています。
Entry セクションでは、ユーザーが迷わず入力できるようバリデーションエラーの表示まで実装し、使いやすさにも配慮しました。