No.056
SCROLL JSGSAP

GSAP Scroll Reveal

スクロールで要素が下からフェードインするGSAP ScrollTriggerの定番。LP・記事・ポートフォリオの読み進めに合わせた登場演出に最適。

DEMO

▼ ページをスクロールすると各ブロックが順に現れます ▼

01 SCROLL REVEAL
02 POWERED BY GSAP
03 SCROLLTRIGGER
04 SMOOTH & FAST

CODE

HTML
<div class="demo-stage gsr-stage"><p class="gsr-hint">▼ ページをスクロールすると各ブロックが順に現れます ▼</p><div class="gsr-item"><span>01</span> SCROLL REVEAL</div><div class="gsr-item"><span>02</span> POWERED BY GSAP</div><div class="gsr-item"><span>03</span> SCROLLTRIGGER</div><div class="gsr-item"><span>04</span> SMOOTH &amp; FAST</div></div>
CSS
.gsr-stage { display:flex; flex-direction:column; align-items:center; gap:1rem; padding:3rem; background:#0F0F12; }
.gsr-hint { color:rgba(255,255,255,.4); font-family:'Oswald',sans-serif; letter-spacing:.15em; font-size:.8rem; margin-bottom:.5rem; text-align:center; }
.gsr-item { width:min(420px,82%); padding:1.3rem 1.6rem; background:#1A1A1A; border:1px solid rgba(255,255,255,.07); border-radius:12px; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.12em; display:flex; gap:1rem; align-items:center; opacity:0; transform:translateY(40px); }
.gsr-item span { color:#E91B89; font-size:1.4rem; }
JS
// 要 GSAP + ScrollTrigger CDN（gsap.min.js / ScrollTrigger.min.js）
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray('.gsr-item').forEach(function(el){
  gsap.to(el, {
    opacity: 1, y: 0, duration: 0.8, ease: 'power3.out',
    scrollTrigger: { trigger: el, start: 'top 88%' }
  });
});

AI PROMPT

Claude Cursor v0
PROMPT
スクロールで要素が下からフェードインするGSAP ScrollTriggerのアニメーションを作って。gsap.registerPlugin(ScrollTrigger)後、gsap.utils.toArray('.item')で対象を集め、各要素にgsap.to(el,{opacity:1, y:0, duration:0.8, ease:'power3.out', scrollTrigger:{trigger:el, start:'top 88%'}})を適用。CSS側で初期状態を opacity:0 + transform:translateY(40px) にしておき（FOUC防止）、ビューポート88%地点に入った要素から順に現れる。GSAP CDN（gsap.min.js + ScrollTrigger.min.js）の読み込みが必要。LP・記事の読み進め演出に最適。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの心理学 ―わかりやすさ・使いやすさの法則 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

GSAPスクロールリビール（GSAP Scroll Reveal）とは

スクロールで要素が下からフェードインするGSAP ScrollTriggerの定番。LP・記事・ポートフォリオの読み進めに合わせた登場演出に最適。この効果はアニメーションライブラリGSAPで実装され、スクロール連動にはScrollTriggerを組み合わせる。タイムラインで複数の動きを順序立てて精密に制御できるのが特長です。

使いどころ

縦長LP・記事・ストーリーテリング型ページなど、読み進めに合わせた登場演出に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

JavaScriptで座標やタイミングを計算しながら要素のstyleを書き換えます。更新はrequestAnimationFrameでブラウザの描画タイミングに同期させ、位置の変更はtransformで行うとレイアウト再計算を避けられて軽くなります。動きを減らす設定（prefers-reduced-motion）の利用者へは演出を控えめにする配慮も大切です。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。