コードを書かなくても、こんな動きが作れる
↓ スクロールしてデモを体験 ↓
タイトルがパラパラッと降ってくる、定番の演出。
朝活、はじめました。
日本語をパラパラ、ワンテンポ遅れて英語をスッと。アパレルやカフェのサイト風。
挑戦は、何歳からでも。
CHALLENGE AT ANY AGE
ハッカー映画やゲームUIで見る、あの演出。
スタンバイ……
カードが1枚ずつ順番に。stagger（スタッガー）という機能。
同じ移動でも、緩急（イージング）でこんなに印象が変わる。
右へ→下へ→消える。タイムラインで「振り付け」する。
その位置まで来たらフワッと登場。小窓の中をスクロールしてみて。
↓ スクロール ↓
スクロール量と動きがリンク。戻すと巻き戻る。
↓ 進めると転がる／戻すと巻き戻る
スクロールしても、このセクションだけ画面に固定される。
固定＋連動＋振り付け。大手メーカーの製品ページ風の演出。
↓ この中をスクロール ↓
ロゴやイラストが、手描き風にスーッと引かれていく。（DrawSVG）
丸が星に、にゅるっと変形。（MorphSVG）
まっすぐじゃなく、曲線の軌道に沿って飛ぶ。（MotionPath）
カチッと切り替わらず、ぬるっと変形。一覧→詳細でよく使う。（Flip）
クリックするたび、大きさが切り替わります
マウスで掴んで動かせる。勢いよく離すと慣性で滑る。（Draggable）
↑ 箱を掴んで動かしてみて（投げると滑ります）
近い層ほど速く、遠い層ほどゆっくり。動く量の差だけで奥行きが生まれる。ブランドサイトで定番の演出。
↓ この中をスクロール ↓
同じスクロールで2つの箱を動かす。trueはピタッと一致、1は1秒かけて追いつく。速く動かして止めると差がわかる。
↓ 速くスクロールして止めてみて ↓
画面いっぱいで体験するやつ。別ページで開きます。
スクロールでカードが積み上がる、ブランドLPで見かける演出。全画面で体験。
ここからはライブ実演。以下のプロンプトをAIに投げるだけで、素のコーポレートサイトに動きが付いていきます。
▶ 実演サイトを開く（BAC WORKS） gsap-corporate-demo.pages.dev ｜ 新しいタブで開きますデモ1〜3：文字バラし
ヒーローの見出しを1文字ずつバラして、下からふわっと順番に出して
デモ4：スタッガー
事業内容の4枚のカードを、スクロールしたら順番にスラスラ出して
デモ6応用：カウントアップ
私たちについての数字（50年・1,200社・0.01mm）を、スクロールで見えたらカウントアップして
デモ7：スクロールトリガー
各セクションの見出しと中身を、スクロールで見えたタイミングでフェードインして
デモ16：パララックス
ヒーローの背景画像だけスクロールでゆっくり動かしてパララックスにして
デモ9＋18：ピン留め＋横スクロール
実績のセクションを画面に固定して、カードを横スクロールで見せて
全部ソースコードでGSAP使用を確認済み。デモの何番が使われてるか探しながら見てみよう。
🏅 鉄板（第1回で紹介）
KUBOTA GIN（久保田 ジン）朝日酒造。スクロールで物語が進むストーリーテリング型＋MotionPath（デモ13） OGURO（オグロ）新潟の町工場。全体パララックス（デモ16）＋ScrollTrigger＋Lenis。HTML直書きで読みやすい CIELIA セレクションLP関電不動産のマンションLP。横スクロール（デモ18）＋カードの積み重ね（デモ19）🔁 横スクロールが見どころ
クラモト氷業氷屋さん×リッチ演出のギャップ。GSAPがソース直書きで読みやすい THE610BASEWordPressテーマ内にGSAP。WP案件に応用しやすい実例 otto works制作会社系。gsap+ScrollTrigger直書き 近畿大学 創立100周年記念サイト大規模案件。GSAP+ScrollTrigger+Lenisの合わせ技 河馬印本舗和のトーンの横スクロール。GSAP+Lenis