ドローン視点で辿る、ハイキングの追体験アニメーション

Motion / Interaction

実装ポイント Focus: ユーザーの縦スクロールに連動して、SVGで描かれた登山道が伸びていくアニメーションを実装しました。
道が描画されるだけでなく、画面幅を大きく超えるコンテナ（200vw）を用意し、
道のカーブに合わせて画面全体が横にスライドする「疑似的なカメラワーク」を取り入れています。これにより、まるでドローンがハイキングコースを追従しているかのようなダイナミックな体験を提供します。
また、進行に合わせてポラロイド風にデザインされた思い出の写真たちがふんわりと浮かび上がり、視覚的な楽しさとストーリー性を演出しています。
挑戦 Challenge: SVGで描かれたS字カーブの道に対して画面を横移動させる際、単純な動きでは要素が画面外にはみ出してしまうという課題がありました。
これを解決するため、GSAPの `keyframes` を活用。道の曲がり具合に合わせてX軸の移動量とタイミングを3段階に分けて実装しました。
さらに、伸びていく線が写真に到達する瞬間にフェードインが始まるよう、発火位置を調整し、違和感のない心地よいインタラクションを実現しています。
使用技術 Animation: ・HTML5 / SCSS
・SVG
・JavaScript (GSAP / ScrollTrigger)
詳細 Details: #ScrollTrigger #SVGanimation