UIパーツ GSAPセット｜ハンバーガーメニュー＋スクロール表示（ScrollTrigger対応）

職業訓練で実際に使っている「ハンバーガーメニュー」と「スクロール表示」のテンプレートセットです。

GSAPを使って、開閉やスクロールのアニメーションを統一しています。

■ ハンバーガーメニュー（GSAP）

・SPはドロワー、PCは横並びに自動切替

・開閉・アイコン（≡→×）・スムーススクロールをGSAPで統一

・ScrollToPluginでページ内移動

・iOS Safari対策（背景スクロールロック）

・GSAPが読めない環境でもフォールバック動作

■ スクロール表示（GSAP ScrollTrigger）

・画面に入ったら「ふわっと」表示

・GSAPのイージング（power2.out）で滑らかに

・グループ単位で時間差（stagger）表示

・?debug=1 でmarkers表示

・JSが止まっても表示は残る（真っ白事故対策）

----------------------------------------

【こんな人に向いています】

----------------------------------------

・GSAPでアニメーションを統一したい

・スムーズなイージングを使いたい

・ScrollTriggerを手軽に導入したい

・自分用のMy辞書としてストックしたい

----------------------------------------

【同梱ファイル】

----------------------------------------

・ハンバーガーメニュー一式（HTML/CSS/JS + README）

・スクロール表示一式（HTML/CSS/JS + デモ画像 + README）

・LICENSE.txt

・CHANGELOG.md

※ GSAP本体は同梱していません（CDNで読み込みます）

----------------------------------------

【導入（最短）】

----------------------------------------

1. CSS / JS をプロジェクトへコピー

2. HTMLに指定のid / classを追加

3. GSAP / ScrollTrigger（またはScrollToPlugin）をCDNで読み込み

4. ブラウザで確認

詳細は同梱のREADMEを参照してください。

----------------------------------------

【対応環境】

----------------------------------------

・Chrome / Edge / Firefox / Safari（現行版）

・動作確認：PC（Chrome/Edge）、iOS Safari

・Android：一般的な環境では動作想定（実機未検証）

・GSAP/ScrollTriggerをCDNで読む場合、ネット接続が必要です

----------------------------------------

【GSAPのライセンスについて】

----------------------------------------

本商品にGSAP本体は同梱していません。

GSAPの利用条件はGSAP側のライセンスに従ってください。

詳細：https://gsap.com/licensing/

----------------------------------------

【サポート】

----------------------------------------

・本商品はテンプレート提供です

・個別環境への組み込み代行・調整はサポート対象外です

・不具合報告（再現手順あり）は今後の更新で対応する場合があります

----------------------------------------

【利用条件】

----------------------------------------

・商用利用：可

・改変：可

・再配布・再販売：不可

詳細は同梱のLICENSE.txtを確認してください。