プレミアム会員限定動画

GSAPを使って、途中のコンテンツを横スクロールにする方法！後編

前編の動画はこちら
https://factory-programming-mv.com/video/-6d0mTnhcLE/


この動画では、GSAP（GreenSock Animation Platform）を使ったWebページ内での横スクロール効果の実装方法を学びます。特に、途中のセクションを縦スクロール時に横スクロールへと切り替える方法を解説していきます。

前回、セクションを複数設定し、Li要素（リストアイテム）が横にスクロールする動きを実装しました。
今回は、ユーザーがページを縦スクロールした際に、特定のセクションが横スクロールするように変化する機能を追加します。

・基本設定
まず、縦方向のスクロールを防ぐため、CSSで「オーバーフローX（overflow-x）」を隠す設定にします。
続いて、JavaScriptを使ってGSAPの機能を活用します。

・GSAPの設定
horizontalsクラスの中のリストアイテムを取得します。
GSAPを用いて、各リストアイテムをX軸上で動かします。具体的には、リストアイテムの幅と個数を利用して移動距離を計算します。
スクロールトリガーを設定して、特定の要素（今回は「ホリゾンタルラッパー」）が画面中央に来たときに横スクロールが開始されるようにします。
スクロールの速度や動きの変化（イージング）も自由に調整可能です。

・補足
「ピン（pin）」機能をONにすることで、特定の要素が常に一定の位置に固定されます。
「スクラブ（scrub）」機能を有効にすると、スクロールの動きとアニメーションが同期します。

・完成
一連の設定を行うことで、縦スクロール中に特定のセクションが横スクロールする動きが実現されます。この方法は見た目の効果が大きく、特にストーリーテリングやプロダクトの紹介など、コンテンツを魅力的に表示する場面で効果的です。

最後に、実際の動きや調整方法については、動画を参照してください。また、今回使用したコードは動画の概要欄からダウンロード可能です。