線が動くアニメーションの作り方｜描くように伸びる手書き風・スクロール連動演出まで解説

<svg width="400" height="200" viewBox="0 0 400 200">
  <path
    class="line-animation"
    d="M 10 100 Q 100 10, 200 100 T 390 100"
    stroke="#3498db"
    stroke-width="3"
    fill="none"
  />
</svg>

.line-animation {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-line 2s ease-in-out forwards;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

.line-animation-1 {
  animation-delay: 0s;
}

.line-animation-2 {
  animation-delay: 0.5s;
}

.line-animation-3 {
  animation-delay: 1s;
}

/* 10pxの実線、5pxの空白を繰り返す */
stroke-dasharray: 10 5;

/* 線全体の長さと同じ値を指定すると、1本の実線になる */
stroke-dasharray: 1000;

/* パターンを1000px後方にシフト → 線が見えなくなる */
stroke-dashoffset: 1000;

/* 0にすると元の位置に戻る → 線が表示される */
stroke-dashoffset: 0;

<svg width="300" height="100" viewBox="0 0 300 100">
  <path
    class="logo-path"
    d="M 20 50 L 80 50 L 80 20 M 80 50 L 80 80 M 100 20 L 100 80 L 140 80 M 160 80 L 160 20 Q 200 20, 200 50 Q 200 80, 160 80"
    stroke="#2c3e50"
    stroke-width="4"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

.logo-path {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: draw-logo 3s ease-out forwards;
}

@keyframes draw-logo {
  to {
    stroke-dashoffset: 0;
  }
}

const path = document.querySelector('.logo-path');
const pathLength = path.getTotalLength();

// 取得した長さをCSSカスタムプロパティに設定
path.style.setProperty('--path-length', pathLength);

.logo-path {
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: draw-logo 10s ease-out forwards;
}

<svg width="400" height="200" viewBox="0 0 400 200">
  <path
    id="interactive-line"
    d="M 10 100 L 390 100"
    stroke="#e74c3c"
    stroke-width="4"
    fill="none"
  />
</svg>
<button id="draw-btn">線を描く</button>

const line = document.getElementById('interactive-line');
const button = document.getElementById('draw-btn');
const length = line.getTotalLength();

// 初期状態: 線を非表示
line.style.strokeDasharray = length;
line.style.strokeDashoffset = length;

button.addEventListener('click', () => {
  line.style.transition = 'stroke-dashoffset 2s ease-in-out';
  line.style.strokeDashoffset = '0';
});

const line = document.getElementById('scroll-line');
const length = line.getTotalLength();

// 初期設定
line.style.strokeDasharray = length;
line.style.strokeDashoffset = length;

window.addEventListener('scroll', () => {
  // スクロール率を計算(0〜1)
  const scrollPercentage = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);

  // 線の描画量を更新
  const drawLength = length * scrollPercentage;
  line.style.strokeDashoffset = length - drawLength;
});

const lines = document.querySelectorAll('.sequential-line');

lines.forEach((line, index) => {
  const length = line.getTotalLength();

  // 初期設定
  line.style.strokeDasharray = length;
  line.style.strokeDashoffset = length;

  // 順次アニメーション(各線0.5秒遅延)
  setTimeout(() => {
    line.style.transition = 'stroke-dashoffset 1.5s ease-in-out';
    line.style.strokeDashoffset = '0';
  }, index * 500);
});

<div class="svg-container">
  <svg viewBox="0 0 500 200">
    <path class="advanced-line" d="M 10 100 Q 150 0 250 100 T 490 100" id="myLine" />
  </svg>
</div>

body {
  height: 300vh; /* スクロールを発生させるために十分な高さを設定 */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.svg-container {
  width: 80%;
  height: 50vh; /* SVGが表示される領域 */
  margin-top: 50vh; /* スクロール開始位置を調整 */
}
/* SVGパスのスタイル設定 */
.advanced-line {
  fill: none; /* 塗りつぶしなし */
  stroke: #4caf50; /* 線の色 */
  stroke-width: 5; /* 線の太さ */
  stroke-linecap: round; /* 線の端を丸く */
}

gsap.registerPlugin(ScrollTrigger);

// アニメーションの対象となる要素を取得
const line = document.querySelector(".advanced-line");

// GSAPアニメーションの実行
if (line) {
  // GSAPアニメーションに必要な線の全長を取得
  const length = line.getTotalLength();

  // 初期設定: 線の描画を隠すために、stroke-dasharrayとstroke-dashoffsetを全長に設定
  gsap.set(line, { strokeDasharray: length });

  // GSAP from() アニメーションの設定
  // 開始: 線の描画が完全にオフセットされた状態 (線が見えない状態)
  // 終了: strokeDashoffset: 0 (線が完全に描画された状態)
  gsap.from(line, {
    strokeDashoffset: length, // **getTotalLength() の値**
    duration: 2,
    ease: "power2.inOut",
    scrollTrigger: {
      trigger: ".svg-container", // より確実なトリガーとして親要素を指定
      start: "top 80%",
      end: "bottom 20%",
      scrub: true // スクロールに完全同期 (from のため、0から1への変化)
      // markers: true // デバッグ用
    }
  });
}

let ticking = false;

window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      updateLineProgress();
      ticking = false;
    });
    ticking = true;
  }
});

function updateLineProgress() {
  const scrollPercentage = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
  const drawLength = length * scrollPercentage;
  line.style.strokeDashoffset = length - drawLength;
}

<svg class="scroll-svg" width="100%" height="400" viewBox="0 0 800 400">
  <path
    class="scroll-line"
    d="M 50 200 Q 200 50, 400 200 T 750 200"
    stroke="#3498db"
    stroke-width="4"
    fill="none"
  />
</svg>

const scrollLine = document.querySelector('.scroll-line');
const length = scrollLine.getTotalLength();

// 初期状態
scrollLine.style.strokeDasharray = length;
scrollLine.style.strokeDashoffset = length;
scrollLine.style.transition = 'stroke-dashoffset 1.5s ease-out';

// Intersection Observerの設定
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 画面に入ったら線を描画
      scrollLine.style.strokeDashoffset = '0';
    } else {
      // 画面外に出たらリセット(オプション)
      scrollLine.style.strokeDashoffset = length;
    }
  });
}, {
  threshold: 0.3 // 要素の30%が見えたらトリガー
});

observer.observe(document.querySelector('.scroll-svg'));

const scrollLine = document.querySelector('.progress-line');
const length = scrollLine.getTotalLength();

// 初期設定
scrollLine.style.strokeDasharray = length;
scrollLine.style.strokeDashoffset = length;

// スクロール要素の範囲を定義
const scrollElement = document.querySelector('.scroll-section');

function updateLineOnScroll() {
  const rect = scrollElement.getBoundingClientRect();
  const windowHeight = window.innerHeight;

  // 要素が画面内にある割合を計算
  const start = rect.top - windowHeight;
  const end = rect.bottom;
  const total = end - start;
  const progress = Math.max(0, Math.min(1, -start / total));

  // 線の描画量を更新
  const draw = length * progress;
  scrollLine.style.strokeDashoffset = length - draw;
}

let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      updateLineOnScroll();
      ticking = false;
    });
    ticking = true;
  }
});

// 初回実行
updateLineOnScroll();

<!-- GSAPとScrollTriggerプラグインの読み込み -->
<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js>"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/ScrollTrigger.min.js>"></script>

gsap.registerPlugin(ScrollTrigger);

const line = document.querySelector('.gsap-line');
const length = line.getTotalLength();

// 初期設定
line.style.strokeDasharray = length;
line.style.strokeDashoffset = length;

// ScrollTriggerアニメーション
gsap.to(line, {
  strokeDashoffset: 0,
  ease: 'none',
  scrollTrigger: {
    trigger: '.gsap-line',
    start: 'top 80%',    // 要素の上端が画面の80%位置に来たら開始
    end: 'bottom 20%',   // 要素の下端が画面の20%位置に来たら終了
    scrub: 1,            // スクロールに同期(数値は遅延時間)
    markers: false       // デバッグ用マーカー(開発時はtrue)
  }
});

const lines = document.querySelectorAll('.stagger-line');

lines.forEach((line, index) => {
  const length = line.getTotalLength();
  line.style.strokeDasharray = length;
  line.style.strokeDashoffset = length;

  gsap.to(line, {
    strokeDashoffset: 0,
    scrollTrigger: {
      trigger: line,
      start: 'top 85%',
      end: 'bottom 30%',
      scrub: 1
    },
    delay: index * 0.2 // 各線を少しずつ遅延させる
  });
});

<svg width="400" height="300" viewBox="0 0 400 300">
  <rect
    class="border-rect"
    x="50"
    y="50"
    width="300"
    height="200"
    stroke="#e74c3c"
    stroke-width="3"
    fill="none"
  />
</svg>

.border-rect {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-border 3s ease-in-out forwards;
}

@keyframes draw-border {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="400" height="300" viewBox="0 0 400 300" class="box-container">
  <line class="border-line top" x1="50" y1="50" x2="350" y2="50" stroke="#9b59b6" stroke-width="3"/>
  <line class="border-line right" x1="350" y1="50" x2="350" y2="250" stroke="#9b59b6" stroke-width="3"/>
  <line class="border-line bottom" x1="350" y1="250" x2="50" y2="250" stroke="#9b59b6" stroke-width="3"/>
  <line class="border-line left" x1="50" y1="250" x2="50" y2="50" stroke="#9b59b6" stroke-width="3"/>
</svg>

const borderLines = document.querySelectorAll('.border-line');

borderLines.forEach((line, index) => {
  const length = line.getTotalLength();
  line.style.strokeDasharray = length;
  line.style.strokeDashoffset = length;

  // 各辺を0.3秒ずつ遅延させて順番に描画
  setTimeout(() => {
    line.style.transition = 'stroke-dashoffset 0.8s ease-out';
    line.style.strokeDashoffset = '0';
  }, index * 300);
});

<svg width="500" height="500" viewBox="0 0 500 500">
  <path
    class="diagonal-line-1"
    d="M 50 50 L 450 450"
    stroke="#1abc9c"
    stroke-width="4"
    fill="none"
  />
  <path
    class="diagonal-line-2"
    d="M 450 50 L 50 450"
    stroke="#1abc9c"
    stroke-width="4"
    fill="none"
  />
</svg>

.diagonal-line-1,
.diagonal-line-2 {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}

.diagonal-line-1 {
  animation: draw-diagonal 1.5s ease-out forwards;
}

.diagonal-line-2 {
  animation: draw-diagonal 1.5s ease-out 0.3s forwards;
}

@keyframes draw-diagonal {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="800" height="200" viewBox="0 0 800 200">
  <path
    class="wave-line"
    d="M 0 100 Q 100 20, 200 100 T 400 100 T 600 100 T 800 100"
    stroke="#f39c12"
    stroke-width="3"
    fill="none"
  />
</svg>

const waveLine = document.querySelector('.wave-line');
const length = waveLine.getTotalLength();

waveLine.style.strokeDasharray = length;
waveLine.style.strokeDashoffset = length;

// スクロールで波線が流れるように描画
gsap.to(waveLine, {
  strokeDashoffset: 0,
  duration: 2,
  ease: 'power2.out',
  scrollTrigger: {
    trigger: '.wave-line',
    start: 'top 70%',
    toggleActions: 'play none none reverse'
  }
});

<svg width="300" height="300" viewBox="0 0 300 300">
  <circle
    class="circle-line"
    cx="150"
    cy="150"
    r="100"
    stroke="#e67e22"
    stroke-width="4"
    fill="none"
  />
</svg>

.circle-line {
  stroke-dasharray: 628; /* 2πr ≈ 628 */
  stroke-dashoffset: 628;
  animation: draw-circle 2s ease-in-out forwards;
  transform-origin: center;
  /* 12時の位置から開始するために回転 */
  transform: rotate(-90deg);
}

@keyframes draw-circle {
  to {
    stroke-dashoffset: 0;
  }
}

<div class="animation-container">
  <svg width="600" height="100" viewBox="0 0 600 100">
    <path
      class="underline"
      d="M 50 80 L 550 80"
      stroke="#2980b9"
      stroke-width="3"
      fill="none"
    />
  </svg>
  <h2 class="fade-in-text">美しいアニメーション</h2>
</div>

.animation-container {
  position: relative;
}

.fade-in-text {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-in 0.8s ease-out 1.5s forwards; /* 線の後にフェードイン */
}

.underline {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: draw-line 1.5s ease-out forwards;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

const line = document.querySelector('.animated-line');
const text = document.querySelector('.sync-text');
const length = line.getTotalLength();

line.style.strokeDasharray = length;
line.style.strokeDashoffset = length;

// アニメーションの進行度を監視
let progress = 0;
const duration = 2000; // 2秒
const startTime = Date.now();

function animate() {
  const elapsed = Date.now() - startTime;
  progress = Math.min(elapsed / duration, 1);

  // 線の描画
  line.style.strokeDashoffset = length * (1 - progress);

  // テキストの透明度を線の進行度に同期
  text.style.opacity = progress;
  text.style.transform = `translateY(${20 * (1 - progress)}px)`;

  if (progress < 1) {
    requestAnimationFrame(animate);
  }
}

// Intersection Observerでトリガー
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      animate();
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.5 });

observer.observe(line);

<div class="cascade-container">
  <svg width="400" height="200" viewBox="0 0 400 200">
    <path class="cascade-line" d="M 50 100 L 350 100" stroke="#16a085" stroke-width="3" fill="none"/>
  </svg>
  <div class="cascade-item item-1">コンテンツ1</div>
  <div class="cascade-item item-2">コンテンツ2</div>
  <div class="cascade-item item-3">コンテンツ3</div>
</div>

// GSAPでタイムライン制御
const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.cascade-container',
    start: 'top 70%'
  }
});

// 線を描画
tl.fromTo('.cascade-line',
  {
    strokeDashoffset: 300
  },
  {
    strokeDashoffset: 0,
    duration: 1.5,
    ease: 'power2.out'
  }
);

// 線の描画後、各アイテムを順次表示
tl.fromTo('.cascade-item',
  {
    opacity: 0,
    y: 30
  },
  {
    opacity: 1,
    y: 0,
    duration: 0.6,
    stagger: 0.2, // 各要素を0.2秒ずつ遅延
    ease: 'back.out(1.7)'
  },
  '-=0.5' // 線の描画終了0.5秒前から開始
);

<div class="image-reveal-container">
  <svg width="100%" height="400" viewBox="0 0 800 400">
    <defs>
      <clipPath id="line-clip">
        <rect class="clip-rect" x="0" y="0" width="0" height="400"/>
      </clipPath>
    </defs>
    <image
      href="https://picsum.photos/800/400/"
      width="800"
      height="400"
      clip-path="url(#line-clip)"
    />
  </svg>
  <svg class="overlay-line" width="100%" height="400" viewBox="0 0 800 400">
    <line class="reveal-line" x1="0" y1="200" x2="800" y2="200" stroke="#fff" stroke-width="4"/>
  </svg>
</div>

const clipRect = document.querySelector('.clip-rect');
const revealLine = document.querySelector('.reveal-line');
const lineLength = revealLine.getTotalLength();

revealLine.style.strokeDasharray = lineLength;
revealLine.style.strokeDashoffset = lineLength;

gsap.timeline({
  scrollTrigger: {
    trigger: '.image-reveal-container',
    start: 'top 60%',
    end: 'bottom 40%',
    scrub: 1
  }
})
.to(revealLine, {
  strokeDashoffset: 0,
  ease: 'none'
}, 0)
.to(clipRect, {
  attr: { width: 800 },
  ease: 'none'
}, 0);

<div class="loading-container">
  <svg width="200" height="200" viewBox="0 0 200 200">
    <circle
      class="progress-ring-bg"
      cx="100"
      cy="100"
      r="80"
      stroke="#ecf0f1"
      stroke-width="10"
      fill="none"
    />
    <circle
      class="progress-ring"
      cx="100"
      cy="100"
      r="80"
      stroke="#3498db"
      stroke-width="10"
      fill="none"
      transform="rotate(-90 100 100)"
    />
  </svg>
  <div class="progress-text">0%</div>
</div>

.loading-container {
  position: relative;
  display: inline-block;
}

.progress-ring {
  stroke-dasharray: 502.65; /* 2πr = 2 × π × 80 */
  stroke-dashoffset: 502.65;
  transition: stroke-dashoffset 0.3s ease;
  stroke-linecap: round;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
}

const progressRing = document.querySelector('.progress-ring');
const progressText = document.querySelector('.progress-text');
const circumference = 502.65;

function setProgress(percent) {
  const offset = circumference - (percent / 100) * circumference;
  progressRing.style.strokeDashoffset = offset;
  progressText.textContent = `${Math.round(percent)}%`;
}

// 実際の読み込み進行度を反映
let progress = 0;
const loadingInterval = setInterval(() => {
  progress += Math.random() * 15;
  if (progress >= 100) {
    progress = 100;
    clearInterval(loadingInterval);
    // ローディング完了後の処理
    setTimeout(() => {
      document.querySelector('.loading-container').classList.add('complete');
    }, 300);
  }
  setProgress(progress);
}, 200);

<svg class="logo-loading" width="300" height="300" viewBox="0 0 300 300">
  <line class="converge-line line-1" x1="150" y1="0" x2="150" y2="150" stroke="#e74c3c" stroke-width="3"/>
  <line class="converge-line line-2" x1="300" y1="150" x2="150" y2="150" stroke="#3498db" stroke-width="3"/>
  <line class="converge-line line-3" x1="150" y1="300" x2="150" y2="150" stroke="#f39c12" stroke-width="3"/>
  <line class="converge-line line-4" x1="0" y1="150" x2="150" y2="150" stroke="#2ecc71" stroke-width="3"/>
</svg>

.converge-line {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: converge 1.5s ease-in-out infinite;
}

.converge-line.line-2 {
  animation-delay: 0.2s;
}

.converge-line.line-3 {
  animation-delay: 0.4s;
}

.converge-line.line-4 {
  animation-delay: 0.6s;
}

@keyframes converge {
  0%, 100% {
    stroke-dashoffset: 150;
  }
  50% {
    stroke-dashoffset: 0;
  }
}

<div class="page-transition">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path
      class="transition-path"
      d="M 0 0 L 100 0 L 100 100 L 0 100 Z"
      fill="#2c3e50"
    />
  </svg>
</div>

.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.transition-path {
  stroke: #2c3e50;
  stroke-width: 0;
  fill: #2c3e50;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

.page-transition.active .transition-path {
  animation: page-wipe 0.8s ease-in-out forwards;
}

@keyframes page-wipe {
  0% {
    stroke-dashoffset: 400;
    fill-opacity: 0;
  }
  50% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

// ページ遷移のトリガー
function transitionToPage(url) {
  const transition = document.querySelector('.page-transition');
  transition.classList.add('active');

  setTimeout(() => {
    window.location.href = url;
  }, 800);
}

// リンクに適用
document.querySelectorAll('a.transition-link').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    transitionToPage(link.href);
  });
});

<div class="content-skeleton">
  <svg class="skeleton-svg" width="100%" height="300" viewBox="0 0 600 300">
    <rect class="skeleton-rect" x="20" y="20" width="560" height="80" rx="8" stroke="#bdc3c7" stroke-width="2" fill="none"/>
    <rect class="skeleton-rect" x="20" y="120" width="560" height="80" rx="8" stroke="#bdc3c7" stroke-width="2" fill="none"/>
    <rect class="skeleton-rect" x="20" y="220" width="560" height="60" rx="8" stroke="#bdc3c7" stroke-width="2" fill="none"/>
  </svg>
  <div class="content-items">
    <div class="content-item">実際のコンテンツ1</div>
    <div class="content-item">実際のコンテンツ2</div>
    <div class="content-item">実際のコンテンツ3</div>
  </div>
</div>

const skeletonRects = document.querySelectorAll('.skeleton-rect');
const contentItems = document.querySelectorAll('.content-item');

skeletonRects.forEach((rect, index) => {
  const length = rect.getTotalLength();
  rect.style.strokeDasharray = length;
  rect.style.strokeDashoffset = length;

  // 順番に描画
  gsap.to(rect, {
    strokeDashoffset: 0,
    duration: 0.8,
    delay: index * 0.3,
    ease: 'power2.out',
    onComplete: () => {
      // 描画完了後にコンテンツを表示
      gsap.to(contentItems[index], {
        opacity: 1,
        y: 0,
        duration: 0.5
      });
    }
  });
});

// SVGが最適な例: ロゴの描画
const logo = document.querySelector('.logo-path');
const length = logo.getTotalLength();

gsap.fromTo(logo,
  { strokeDashoffset: length },
  {
    strokeDashoffset: 0,
    duration: 2,
    ease: 'power2.inOut'
  }
);

// Canvasが最適な例: パーティクルシステム
const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');
const particles = [];

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = Math.random() * 2 - 1;
    this.vy = Math.random() * 2 - 1;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
  }

  draw() {
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.lineTo(this.x + this.vx * 10, this.y + this.vy * 10);
    ctx.strokeStyle = 'rgba(52, 152, 219, 0.5)';
    ctx.lineWidth = 2;
    ctx.stroke();
  }
}

// 1000個のパーティクルでも滑らか
for (let i = 0; i < 1000; i++) {
  particles.push(new Particle(
    Math.random() * canvas.width,
    Math.random() * canvas.height
  ));
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(p => {
    p.update();
    p.draw();
  });
  requestAnimationFrame(animate);
}
animate();

/* CSSが最適な例: ボタンの下線 */
.button-underline {
  position: relative;
  padding-bottom: 8px;
}

.button-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #3498db;
  transition: width 0.3s ease;
}

.button-underline:hover::after {
  width: 100%;
}

// SVGのパフォーマンス最適化
// 1. will-changeプロパティの活用
const animatedLines = document.querySelectorAll('.animated-line');
animatedLines.forEach(line => {
  line.style.willChange = 'stroke-dashoffset';
});

// 2. アニメーション完了後にwill-changeを解除
line.addEventListener('animationend', () => {
  line.style.willChange = 'auto';
});

// 3. 大量のSVG要素はSymbolで再利用
<svg style="display: none;">
   <symbol id="line-shape" viewBox="0 0 100 100">
     <path d="M 10 50 L 90 50"/>
   </symbol>
</svg>
<svg><use href="#line-shape"/></svg>

// 4. 画面外の要素はアニメーションを停止
const observerForPerformance = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.style.animationPlayState = 'running';
    } else {
      entry.target.style.animationPlayState = 'paused';
    }
  });
});

<!-- viewBoxを使ったスケーラブルなSVG -->
<svg
  class="responsive-svg"
  viewBox="0 0 800 400"
  preserveAspectRatio="xMidYMid meet"
>
  <path
    class="responsive-line"
    d="M 50 200 Q 400 50, 750 200"
    stroke="#3498db"
    stroke-width="4"
    fill="none"
  />
</svg>

.responsive-svg {
  width: 100%;
  height: auto;
  max-width: 800px;
}

/* レスポンシブ対応: 線の太さを調整 */
@media (max-width: 768px) {
  .responsive-line {
    stroke-width: 2;
  }
}

@media (max-width: 480px) {
  .responsive-line {
    stroke-width: 1.5;
  }
}

// モバイルではアニメーションを簡略化
function getAnimationDuration() {
  const width = window.innerWidth;
  if (width < 480) return 1; // モバイル: 1秒
  if (width < 768) return 1.5; // タブレット: 1.5秒
  return 2; // デスクトップ: 2秒
}

gsap.to('.adaptive-line', {
  strokeDashoffset: 0,
  duration: getAnimationDuration(),
  ease: 'power2.out'
});

// リサイズ時の対応
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    // SVGのpathLengthを再計算
    updatePathLengths();
  }, 250);
});

// 1. getTotalLength()のフォールバック
function getPathLength(path) {
  if (path.getTotalLength) {
    return path.getTotalLength();
  }
  // フォールバック: 概算値を返す
  return 1000;
}

// 2. CSS Custom Propertiesのサポート確認
function supportsCustomProperties() {
  return window.CSS && CSS.supports('color', 'var(--test)');
}

if (supportsCustomProperties()) {
  // CSS変数を使用
  document.documentElement.style.setProperty('--line-length', pathLength);
} else {
  // インラインスタイルで直接設定
  line.style.strokeDasharray = pathLength;
}

// 3. Intersection Observerのポリフィル確認
if ('IntersectionObserver' in window) {
  // Intersection Observerを使用
  const observer = new IntersectionObserver(callback);
} else {
  // フォールバック: スクロールイベントを使用
  window.addEventListener('scroll', handleScrollFallback);
}

// 1. SVGの最適化(SVGO相当の処理)
// - 不要な属性を削除
// - 小数点以下を丸める
// - pathデータを短縮

// 2. 遅延読み込み
const lazyLines = document.querySelectorAll('.lazy-line');
const lazyObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const line = entry.target;
      // 初回表示時のみアニメーションを初期化
      initLineAnimation(line);
      lazyObserver.unobserve(line);
    }
  });
}, {
  rootMargin: '100px' // 画面に入る100px前に準備
});

lazyLines.forEach(line => lazyObserver.observe(line));

// 3. 不要なアニメーションの削除
// prefers-reduced-motionメディアクエリの考慮
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

if (prefersReducedMotion.matches) {
  // アニメーションを無効化または簡略化
  document.querySelectorAll('.animated-line').forEach(line => {
    line.style.animation = 'none';
    line.style.strokeDashoffset = '0';
  });
}

// パフォーマンスモニタリング
const performanceObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 16.67) { // 60fps以下
      console.warn('アニメーションのフレーム落ち検出:', entry);
    }
  }
});
performanceObserver.observe({ entryTypes: ['measure'] });

// アニメーション開始前
performance.mark('animation-start');

// アニメーション実行
animateLine();

// アニメーション終了後
performance.mark('animation-end');
performance.measure('line-animation', 'animation-start', 'animation-end');