GSAP Animation Showcase

GSAP コード詳細解説

HTML構造とクラス設計


  <!-- シンプルなヘッダー（メニューなし、中央配置） -->
<header>
    <div class="container">
        <nav>
            <div class="logo">GSAP Studio</div>
        </nav>
    </div>
</header>

<!-- パーティクル背景付きヒーローセクション -->
<section class="hero" id="home">
    <div class="particles"></div>
    <div class="hero-content">
        <h1>GSAP Animation</h1>
        <p>美しいスクロールアニメーションの世界へようこそ</p>
        <a href="#features" class="hero-btn">体験を開始</a>
    </div>
</section>

<!-- 機能セクション：多方向スライドアニメーション -->
<section class="features" id="features">
    <div class="container">
        <h2 class="section-title">主な機能</h2>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">🚀</div>
                <h3>高性能アニメーション</h3>
                <p>GPU加速を活用した最適化されたアニメーション</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🎨</div>
                <h3>美しいデザイン</h3>
                <p>モダンで洗練されたデザイン要素</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">⚡</div>
                <h3>高速処理</h3>
                <p>軽量で高速な処理でストレスフリー</p>
            </div>
        </div>
    </div>
</section>

<!-- ギャラリーセクション：スケールアニメーション -->
<section class="gallery" id="gallery">
    <div class="gallery-grid">
                                    画像の大きさ(200 * 200)
        <div class="gallery-item"><img src="../img/logo/scroll3.jpg" alt="demo画像" class="demo-img"></div>
        <div class="gallery-item"><img src="../img/logo/scroll4.jpg" alt="demo画像" class="demo-img"></div>
        <div class="gallery-item"><img src="../img/logo/scroll5.jpg" alt="demo画像" class="demo-img"></div>
        <div class="gallery-item"><img src="../img/logo/scroll6.jpg" alt="demo画像" class="demo-img"></div>
        <div class="gallery-item"><img src="../img/logo/scroll7.jpg" alt="demo画像" class="demo-img"></div>
        <div class="gallery-item"><img src="../img/logo/scroll8.jpg" alt="demo画像" class="demo-img"></div>
        <div class="gallery-item"><img src="../img/logo/scroll9.jpg" alt="demo画像" class="demo-img"></div>
        <div class="gallery-item"><img src="../img/logo/scroll10.jpg" alt="demo画像" class="demo-img"></div>
    </div>
</section>

<!-- テキストアニメーション：単語単位で順次表示 -->
<section class="text-animation">
    <div class="text-content">
        <div class="word">GSAPは</div>
        <div class="word">現代の</div>
        <div class="word">ウェブ開発で</div>
        <div class="word">最も</div>
        <div class="word">強力な</div>
        <div class="word">ライブラリです。</div>
        <h2 class="section-title1">テキストアニメーション-2</h2>
        <div class="text-content">
          <div class="fade">このテキストはフェード<br>top 80</div>
          <div class="rotate">このテキストは回転<br>top 50%</div>
          <div class="move">このテキストは移動<br>top 30</div>
        </div>
    </div>
</section>

<!-- 統計セクション：数値カウントアニメーション -->
<section class="stats">
    <div class="stat-item">
        <div class="stat-number" data-count="1000">0</div>
        <div class="stat-label">プロジェクト数</div>
    </div>
</section>
  CDN使用
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/TextPlugin.min.js"></script>

  自分コード使用
  <script src="../js/JavaScriptLibrariesGsapTest1.js"></script>
</body>

CSS スタイルとアニメーション準備


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background: #0a0a0a;
  color: #ffffff;
  overflow-x: hidden;
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ヘッダー */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(15px);
  z-index: 1000;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  font-size: 32px;
  font-weight: bold;
  color: #ff6b6b;
  text-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}

/* ヒーローセクション */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.hero-content {
  position: relative;
  z-index: 10;
}

.hero-content h1 {
  font-size: 64px;
  margin-bottom: 20px;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-weight: 700;
}

.hero-content p {
  font-size: 24px;
  margin-bottom: 30px;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-btn {
  display: inline-block;
  padding: 15px 40px;
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  color: #ffffff;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  font-size: 18px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.hero-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

/* セクション共通 */
section {
  padding: 100px 0;
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* セクション内のグリッドも中央配置 */
.features-grid,.gallery-grid,.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin-top: 80px;
  width: 100%;
  max-width: 1200px;
  justify-items: center;
}

/* テキストコンテンツも中央配置 */
.text-content {
  font-size: 24px;
  line-height: 1.8;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.section-title {
  font-size: 48px;
  text-align: center;
  margin-bottom: 60px;
  color: #ffffff;
  font-weight: 700;
  position: relative;
}

.section-title1 {
  font-size: 48px;
  text-align: center;
  margin-bottom: 60px;
  color: #ffffff;
  font-weight: 700;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  border-radius: 2px;
}

.section-title1::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  border-radius: 2px;
}

/* 機能セクション */
.features {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin-top: 80px;
}

.feature-card {
  background: rgba(255, 255, 255, 0.1);
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: rotate(45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.feature-card:hover::before {
  opacity: 1;
  transform: rotate(45deg) translate(50%, 50%);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.feature-icon {
  font-size: 60px;
  margin-bottom: 25px;
  display: block;
}

.feature-card h3 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #ffffff;
  font-weight: 600;
}

.feature-card p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
}

/* ギャラリーセクション */
.gallery {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 80px;
}

.gallery-item {
  height: 250px;
  border-radius: 15px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
  font-size: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.gallery-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.gallery-item:hover::before {
  left: 100%;
}

.gallery-item:hover {
  transform: scale(1.05) rotate(2deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* テキストアニメーション */
.text-animation {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #2c3e50;
}

.text-animation .section-title {
  color: #2c3e50;
}

.text-animation .section-title1 {
  color: #2c3e50;
}

.text-content {
  font-size: 24px;
  line-height: 1.8;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.word {
  display: inline-block;
  margin-right: 12px;
  margin-bottom: 8px;
}

/* 統計セクション */
.stats {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-top: 80px;
}

.stat-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.stat-number {
  font-size: 56px;
  font-weight: 700;
  color: #ff6b6b;
  margin-bottom: 15px;
  text-shadow: 0 0 20px rgba(255, 107, 107, 0.3);
}

.stat-label {
  font-size: 18px;
  color: #ffffff;
  font-weight: 500;
}

/* フッター */
footer {
  background: #0a0a0a;
  padding: 60px 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

/* コードボタン */
.code-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  color: #ffffff;
  border: none;
  padding: 18px 25px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
  transition: all 0.3s ease;
}

/* モーダル */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 2000;
  overflow-y: auto;
}

.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-content {
  background: #1a1a1a;
  border-radius: 20px;
  padding: 40px;
  min-width: 1440px; 
  max-height: 95%; 
  overflow-y: auto;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
}


.close {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 28px;
  cursor: pointer;
  color: #ffffff;
  background: #ff6b6b;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: all 0.3s ease;
}

.close:hover {
  background: #ff5252;
  transform: scale(1.1);
}

.modal-content h2 {
  color: #ffffff;
  margin-bottom: 30px;
  font-size: 32px;
  text-align: center;
}

.code-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  border-bottom: 2px solid #333;
  gap: 10px;
}

.tab {
  background: none;
  border: none;
  color: #ffffff;
  padding: 15px 30px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  border-radius: 10px 10px 0 0;
  transition: all 0.3s ease;
}

.tab.active {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  border-bottom: 3px solid #ff6b6b;
}

.tab:hover {
  background: rgba(255, 255, 255, 0.05);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-content h3 {
  color: #ff6b6b;
  margin-bottom: 20px;
  font-size: 24px;
}

pre {
  background: #0a0a0a;
  padding: 25px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 2rem; 
  line-height: 1.6;
  white-space: pre-wrap;
  color: #ffffff;
  border: 1px solid #333;
  margin: 20px 0;
}

code {
  color: green;
  font-family: 'Courier New', monospace;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 42px;
  }

  .hero-content p {
    font-size: 18px;
  }

  .section-title {
    font-size: 36px;
  }

  .logo {
    font-size: 28px;
  }

  .features-grid,
  .gallery-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

JavaScript (GSAP) アニメーション実装


GSAP初期化
gsap.registerPlugin(ScrollTrigger);

1. パーティクル生成
function createParticles() {
  const container = document.querySelector('.particles');

  for (let i = 0; i < 50; i++) {
    const particle = document.createElement('div');
    particle.className = 'particle';
    particle.style.left = Math.random() * 100 + '%';
    particle.style.top = Math.random() * 100 + '%';
    container.appendChild(particle);

    gsap.to(particle, {
      duration: Math.random() * 4 + 3,
      x: Math.random() * 200 - 100,
      y: Math.random() * 200 - 100,
      rotation: Math.random() * 360,
      repeat: -1,
      yoyo: true,
      ease: "sine.inOut"
    });
  }
}

2. ヒーローセクションのタイムラインアニメーション
const heroTl = gsap.timeline();
heroTl
    .from(".hero-content h1", {
        opacity: 0,
        y: 80,
        duration: 1.2,
        ease: "power3.out"
    })
    .from(".hero-content p", {
        opacity: 0,
        y: 60,
        duration: 1,
        ease: "power3.out"
    }, "-=0.5")                          // 0.5秒前に開始
    .from(".hero-btn", {
        opacity: 0,
        scale: 0.8,
        duration: 0.8,
        ease: "back.out(1.7)"             // バウンス効果
    }, "-=0.3");                         // 0.3秒前に開始

3. ScrollTriggerアニメーション
セクションタイトルアニメーション-1
gsap.utils.toArray(".section-title").forEach(title => {
  gsap.from(title, {
    opacity: 0,           // 透明度：0から1へ
    y: 50,               // Y軸：50px下から元の位置へ
    duration: 1,        // アニメーション時間：1秒
    ease: "power2.out",
    scrollTrigger: {
      trigger: title,
      start: "top 80%",
      toggleActions: "play none none reverse"
    }
  });
});

セクションタイトルアニメーション-2
gsap.utils.toArray(".section-title1").forEach(title1 => {
  const originalText = title1.textContent;  // 元のテキストを取得
  title1.textContent = "";  // 初期化（空にする）

  gsap.fromTo(title1, 
    { text: "" },  // 開始状態
    { 
      text: originalText,  // 終了状態（元のテキストを打つ）
      duration: 2, 
      ease: "none", 
      scrollTrigger: {
        trigger: title1,
        start: "top 50%",
        toggleActions: "play none none reverse"
      }
    }
  );
});

4. 機能カードの多方向スライドアニメーション
gsap.utils.toArray(".feature-card").forEach((card, index) => {
    const direction = index === 0 ? -100 : index === 2 ? 100 : 0;
    
    gsap.from(card, {
        opacity: 0,
        x: direction,                        // 左:-100, 中央:0, 右:100
        y: direction === 0 ? 50 : 0,        // 中央は下から
        duration: 1,
        delay: index * 0.2,                 // 各カードを0.2秒ずつ遅延
        ease: "power2.out",
        scrollTrigger: {
            trigger: card,
            start: "top 80%",
            toggleActions: "play none none reverse"
        }
    });
});

5. ギャラリーのスケールアニメーション
gsap.utils.toArray(".gallery-item").forEach((item, index) => {
    gsap.from(item, {
        opacity: 0,
        scale: 0.7,                          // 70%のサイズから開始
        duration: 0.8,
        delay: index * 0.1,                  // 各アイテムを0.1秒ずつ遅延
        ease: "back.out(1.7)",               // バウンス効果
        scrollTrigger: {
            trigger: item,
            start: "top 80%",
            toggleActions: "play none none reverse"
        }
    });
});

6. テキストアニメーション（単語単位）
// テキストアニメーション-1
gsap.utils.toArray(".word").forEach((word, index) => {
    gsap.from(word, {
        opacity: 0,
        y: 30,
        rotation: 5,                         // 5度回転から開始
        duration: 0.6,
        delay: index * 0.1,                  // 各単語を0.1秒ずつ遅延
        ease: "power2.out",
        scrollTrigger: {
            trigger: word,
            start: "top 85%",
            toggleActions: "play none none reverse"
        }
    });
});

// テキストアニメーション-2
gsap.utils.toArray(".text-content .fade, .text-content .rotate, .text-content .move").forEach((text, index) => {
  if (text.classList.contains("fade")) {
    // fadeアニメーション：初期状態を設定してtoアニメーションを使用
    gsap.set(text, { opacity: 0 });
    gsap.to(text, {
      opacity: 1,
      duration: 1.5,      // 1.5秒でかなりゆっくり
      delay: 1,       // 1秒で早く開始
      ease: "none",     // 一定速度で分かりやすく
      scrollTrigger: {
        trigger: text,
        start: "top 80%",
        toggleActions: "play none none reverse"
      }
    });
  } else if (text.classList.contains("rotate")) {
    gsap.from(text, {
      opacity: 0,
      rotation: 360,
      duration: 2,
      ease: "power2.out",
      scrollTrigger: {
        trigger: text,
        start: "top 50%",
        opacity: 1,
        toggleActions: "play none none reverse"
      }
    });
  } else if (text.classList.contains("move")) {
    gsap.from(text, {
      opacity: 0,
      x: 500,
      duration: 2,
      ease: "power2.out",
      scrollTrigger: {
        trigger: text,
        start: "top 30%",
        opacity: 1,
        toggleActions: "play none none reverse"
      }
    });
  }
});

7. 統計数値のカウントアニメーション
gsap.utils.toArray(".stat-number").forEach(number => {
    const target = parseInt(number.dataset.count);
    
    gsap.to(number, {
        textContent: target,                 // 0からターゲット値まで
        duration: 2.5,                       // 2.5秒かけてカウント
        ease: "power2.out",
        snap: { textContent: 1 },            // 整数値に丸める
        scrollTrigger: {
            trigger: number,
            start: "top 80%",
            toggleActions: "play none none reverse"
        }
    });
});

8. スムーススクロール
document.querySelector('.hero-btn').addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector('#features');
    if (target) {
        gsap.to(window, {
            duration: 1.5,
            scrollTo: {
                y: target,
                offsetY: 80                  // ヘッダー分のオフセット
            },
            ease: "power2.inOut"
        });
    }
});

9. 初期化
createParticles();

GSAP 使用のコツとベストプラクティス



ScrollTriggerの基本設定
scrollTrigger: {
    trigger: element,                // トリガー要素
    start: "top 50%",               // 開始位置(要素上端が画面50%位置)
    end: "bottom 20%",              // 終了位置
    toggleActions: "play none none reverse",
    // 4つのアクション: onEnter, onLeave, onEnterBack, onLeaveBack
    scrub: true,                    // スクロール量に同期
    pin: true,                      // 要素を固定
}

イージング関数の選択
ease: "power2.out"                  // 減速
ease: "back.out(1.7)"              // バウンス効果
ease: "sine.inOut"                 // 滑らかな曲線
ease: "elastic.out"                // 弾性効果

パフォーマンス最適化
gsap.set(element, {
    force3D: true,                  // GPU加速を強制
    transformOrigin: "center center"
});

transform プロパティを優先使用
gsap.to(element, {
    x: 100,                         // translateX(100px) より高速
    y: 50,                          // translateY(50px) より高速
    rotation: 45,                   // rotate(45deg) より高速
    scale: 1.2,                     // scale(1.2) より高速
    duration: 1
});

タイムラインの活用
const tl = gsap.timeline();
tl.from(".element1", {opacity: 0, duration: 1})
  .from(".element2", {x: -50, duration: 1}, "-=0.5")
  .from(".element3", {scale: 0, duration: 1}, "-=0.5");

デバッグ機能
ScrollTrigger.config({
    debug: true,                    // デバッグマーカー表示
    markers: true                   // 開始・終了位置マーカー表示
});

主要なアニメーションパターン

1. フェードイン
gsap.from(element, { opacity: 0, duration: 1 });

2. スライドイン
gsap.from(element, { x: -100, duration: 1 });

3. スケールイン
gsap.from(element, { scale: 0, duration: 1 });

4. 回転
gsap.from(element, { rotation: 180, duration: 1 });

5. 数値カウント
gsap.to(element, {
    textContent: 100,
    duration: 2,
    snap: { textContent: 1 }
});

リフレッシュとクリーンアップ
ScrollTrigger.refresh();
window.addEventListener('resize', () => {
    ScrollTrigger.refresh();
});

GSAP Animation

主な機能

高性能アニメーション

美しいデザイン

高速処理

ギャラリー

テキストアニメーション-1
top 80%

テキストアニメーション-2

実績統計

GSAP Animation

主な機能

高性能アニメーション

美しいデザイン

高速処理

ギャラリー

テキストアニメーション-1top 80%

テキストアニメーション-2

実績統計

GSAP コード詳細解説

HTML構造とクラス設計

CSS スタイルとアニメーション準備

JavaScript (GSAP) アニメーション実装

GSAP 使用のコツとベストプラクティス

テキストアニメーション-1
top 80%