GSAP完全アニメーションデモ

基本トランスフォーム

GSAP基本URL

いろんな種類があるので確認して使用

HTML

CSS

JavaScript


<div class="box" id="basic-box"></div>
  <button onclick="moveBox()">移動</button>
  <button onclick="rotateBox()">回転</button>
  <button onclick="scaleBox()">拡大</button>
  <button onclick="resetBasic()">リセット</button>


.box {
  width: 60px;
  height: 60px;
  background: #ff6b6b;
  border-radius: 8px;
  cursor: pointer;
}


移動
function moveBox() {
  gsap.to("#basic-box", { x: 100, duration: 1, ease: "power2.out" });
}

回転
function rotateBox() {
  gsap.to("#basic-box", { rotation: "+=360", duration: 1, ease: "power2.out" });
}

拡大
function scaleBox() {
  gsap.to("#basic-box", { scale: 1.5, duration: 1, ease: "back.out(1.7)" });
}

リセット
function resetBasic() {
  gsap.to("#basic-box", { x: 0, rotation: 0, scale: 1, duration: 0.8 });
}

イージング効果

GSAPイージンググラフURL

いろんな種類があるので確認して使用

HTML

CSS

JavaScript

<div class="circle" id="easing-circle"></div>
<button onclick="easeLinear()">Linear</button>
<button onclick="easePower()">Power</button>
<button onclick="easeBack()">Back</button>
<button onclick="easeElastic()">Elastic</button>
<button onclick="easeBounce()">Bounce</button>


  .circle {
    width: 50px;
    height: 50px;
    background: #4ecdc4;
    border-radius: 50%;
  }



  function easeLinear() {
    gsap.to("#easing-circle", { 
        x: 120, 
        duration: 1, 
        ease: "none" 
    });
}

function easePower() {
    gsap.to("#easing-circle", { 
        x: 0, 
        duration: 1, 
        ease: "power3.out" 
    });
}

function easeBack() {
    gsap.to("#easing-circle", { 
        x: 120, 
        duration: 1, 
        ease: "back.out(1.7)" 
    });
}

function easeElastic() {
    gsap.to("#easing-circle", { 
        x: 0, 
        duration: 1.5, 
        ease: "elastic.out(1, 0.3)" 
    });
}

function easeBounce() {
    gsap.to("#easing-circle", { 
        x: 120, 
        duration: 1, 
        ease: "bounce.out" 
    });
}

カラーアニメーション

HTML

CSS

JavaScript


<div class="box" id="color-box"></div>
<button onclick="rainbowColor()">レインボー</button>
<button onclick="gradientShift()">グラデーション</button>
<button onclick="pulseColor()">パルス</button>


.box {
  width: 60px;
  height: 60px;
  background: #ff6b6b;
  border-radius: 8px;
  cursor: pointer;
}


function rainbowColor() {
    const colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#f9ca24", "#f0932b"];
    const tl = gsap.timeline({ repeat: 2 });
    colors.forEach(color => {
        tl.to("#color-box", { backgroundColor: color, duration: 0.3 });
    });
}

function gradientShift() {
    gsap.to("#color-box", {
        background: "linear-gradient(45deg, #ff6b6b, #4ecdc4)",
        duration: 2,
        ease: "power2.inOut"
    });
}

function pulseColor() {
    gsap.to("#color-box", {
        backgroundColor: "#f9ca24",
        scale: 1.2,
        duration: 0.5,
        yoyo: true,
        repeat: 5,
        ease: "power2.inOut"
    });
}

テキストアニメーション

アニメーションテキスト

HTML

CSS

JavaScript

<div class="text-element" id="text-demo">アニメーションテキスト</div>
<button onclick="typeWriter()">タイプライター</button>
<button onclick="fadeInWords()">文字フェード</button>
<button onclick="flipText()">文字回転</button>
<button onclick="textReveal()">テキスト表示</button>

.text-element {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
}


  タイプライター
  function typeWriter() {
    const element = document.getElementById('text-demo');
    const text = "アニメーションテキスト";
    element.textContent = "";
    
    for (let i = 0; i < text.length; i++) {
        gsap.to(element, {
            duration: 0.05,
            delay: i * 0.1,
            onComplete: function() {
                element.textContent += text[i];
            }
        });
    }
}

文字フェード
function fadeInWords() {
    const element = document.getElementById('text-demo');
    const words = element.textContent.split('');
    element.innerHTML = words.map(char => 
        `<span style="opacity:0">${char}</span>`).join('');
    
    gsap.to(element.children, {
        opacity: 1,
        duration: 0.5,
        stagger: 0.1,
        ease: "power2.out"
    });
}

文字回転
function flipText() {
    const element = document.getElementById('text-demo');
    const text = element.textContent;
    
    // 文字を個別のspan要素に分割
    element.innerHTML = text.split('').map(char => 
        `${char}`
    ).join('');
    
    // 各文字を回転アニメーション
    gsap.to(element.children, {
        rotationY: 360,
        duration: 0.8,
        stagger: 0.1,
        ease: "power2.out",
        transformOrigin: "center center"
    });
}

テキスト表示
function textReveal() {
  const element = document.getElementById('text-demo');
  gsap.fromTo(element,
    { clipPath: "inset(0 100% 0 0)" },
    { clipPath: "inset(0 0% 0 0)", duration: 2, ease: "power2.out" }
  );
}

シェイプモーフィング

HTML

CSS

JavaScript

<div class="morphing-shape" id="morph-shape"></div>
<button onclick="morphToCircle()">円形</button>
<button onclick="morphToStar()">星形</button>
<button onclick="morphToHeart()">ハート</button>
<button onclick="morphReset()">リセット</button>


  .morphing-shape {
    width: 60px;
    height: 60px;
    background: #f9ca24;
    border-radius: 8px;
}


  円形
  function morphToCircle() {
    gsap.to("#morph-shape", {
        borderRadius: "50%",
        duration: 1,
        ease: "power2.out"
    });
}

星形
function morphToStar() {
    gsap.to("#morph-shape", {
        borderRadius: "50% 0 50% 0",
        rotation: 45,
        duration: 1,
        ease: "back.out(1.7)"
    });
}

ハート
function morphToHeart() {
    gsap.to("#morph-shape", {
        borderRadius: "50% 50% 0 0",
        rotation: 0,
        duration: 1,
        ease: "elastic.out(1, 0.3)"
    });
}

プログレスバー

HTML

CSS

JavaScript


<div class="progress-bar">
  <div class="progress-fill" id="progress-fill"></div>
</div>
<button onclick="animateProgress()">プログレス</button>
<button onclick="pulseProgress()">パルス</button>
<button onclick="resetProgress()">リセット</button>


.progress-bar {
  width: 100%;
  height: 20px;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    width: 0%;
    border-radius: 10px;
}


  プログレス
  function animateProgress() {
    gsap.to("#progress-fill", {
        width: "100%",
        duration: 3,
        ease: "power2.out"
    });
}

パルス
function pulseProgress() {
    gsap.to("#progress-fill", {
        width: "100%",
        duration: 2,
        ease: "elastic.out(1, 0.3)"
    });
}

リセット
function resetProgress() {
    gsap.to("#progress-fill", {
        width: "0%",
        duration: 1,
        ease: "power2.out"
    });
}

パーティクル効果

クリックでパーティクル

HTML

CSS

JavaScript

<div class="demo-area" id="particle-area">
    <div>クリックでパーティクル</div>
</div>
<button onclick="createParticles()">パーティクル</button>
<button onclick="fireworks()">花火</button>
<button onclick="clearParticles()">クリア</button>


.particle {
    width: 8px;
    height: 8px;
    background: #ff6b6b;
    border-radius: 50%;
    position: absolute;
}


パーティクル
function createParticles() {
  const container = document.getElementById('particle-area');
  for (let i = 0; i < 20; i++) {
    const particle = document.createElement('div');
    particle.className = 'particle';
    particle.style.left = '50%';
    particle.style.top = '50%';
    particle.style.background = `hsl(${Math.random() * 360}, 70%, 60%)`;
    container.appendChild(particle);
    gsap.to(particle, {
      x: Math.random() * 300 - 150,
      y: Math.random() * 300 - 150,
      scale: Math.random() * 2,
      opacity: 0,
      duration: 2,
      ease: "power2.out",
      onComplete: () => particle.remove()
    });
  }
}

花火
function fireworks() {
  const container = document.getElementById('particle-area');
  for (let i = 0; i < 50; i++) {
    const particle = document.createElement('div');
    particle.className = 'particle';
    particle.style.left = '50%';
    particle.style.top = '50%';
    particle.style.background = `hsl(${Math.random() * 360}, 100%, 60%)`;
    container.appendChild(particle);
    const angle = (i / 50) * Math.PI * 2;
    const distance = Math.random() * 200 + 50;
    gsap.to(particle, {
      x: Math.cos(angle) * distance,
      y: Math.sin(angle) * distance,
      scale: 0,
      opacity: 0,
      duration: 1.5,
      ease: "power2.out",
      onComplete: () => particle.remove()
    });
  }
}

波・液体効果

HTML

CSS

JavaScript


<div class="wave" id="wave-element"></div>
<button onclick="waveAnimation()">波アニメーション</button>
<button onclick="liquidEffect()">液体効果</button>
<button onclick="rippleEffect()">リップル</button>


  .wave {
    width: 200px;
    height: 100px;
    background: linear-gradient(45deg, #4ecdc4, #45b7d1);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  }


波アニメーション
  function waveAnimation() {
    gsap.to("#wave-element", {
        scaleX: 1.2,
        scaleY: 0.8,
        duration: 1,
        yoyo: true,
        repeat: 3,
        ease: "power2.inOut"
    });
}

液体効果
function liquidEffect() {
    gsap.to("#wave-element", {
        borderRadius: "30% 70% 20% 80% / 40% 50% 60% 50%",
        duration: 2,
        yoyo: true,
        repeat: 2,
        ease: "power2.inOut"
    });
}

リップル
function rippleEffect() {
  const tl = gsap.timeline();
  for (let i = 0; i < 3; i++) {
    tl.to("#wave-element", {
      scale: 1.3,
      opacity: 0.5,
      duration: 0.8,
      ease: "power2.out"
    }, i * 0.3)
      .to("#wave-element", {
        scale: 1,
        opacity: 1,
        duration: 0.8,
        ease: "power2.out"
      }, i * 0.3 + 0.4);
  }
}

3D効果

3D CARD

HTML

CSS

JavaScript


<div class="card-3d" id="card-3d">3D CARD</div>
<button onclick="flip3D()">3D回転</button>
<button onclick="perspective3D()">遠近感</button>
<button onclick="cube3D()">立方体</button>


.card-3d {
  width: 150px;
  height: 100px;
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transform-style: preserve-3d;
}


3D回転
function flip3D() {
  gsap.to("#card-3d", {
    rotationY: 180,
    duration: 1,
    ease: "power2.inOut"
  });
}

遠近感
function perspective3D() {
  gsap.to("#card-3d", {
    rotationX: 45,
    rotationY: 45,
    z: 100,
    duration: 2,
    ease: "power2.inOut"
  });
}

立方体
function cube3D() {
  const tl = gsap.timeline();
  tl.to("#card-3d", { rotationX: 90, duration: 0.5 })
    .to("#card-3d", { rotationY: 90, duration: 0.5 })
    .to("#card-3d", { rotationZ: 90, duration: 0.5 })
    .to("#card-3d", { rotationX: 0, rotationY: 0, rotationZ: 0, duration: 1 });
}

SVGアニメーション

HTML

CSS

JavaScript


  <svg class="svg-demo" viewBox="0 0 200 150">
    <circle id="svg-circle" cx="100" cy="75" r="30" fill="#ff6b6b"/>
    <path id="svg-path" d="M50,100 Q100,50 150,100" 
        stroke="#4ecdc4" stroke-width="3" fill="none" 
        stroke-dasharray="200" stroke-dashoffset="200"/>
</svg>
<button onclick="animateSVG()">SVG</button>
<button onclick="drawPath()">パス描画</button>
<button onclick="morphSVG()">SVGモーフィング</button>

.svg-demo {
    width: 200px;
    height: 150px;
}


  SVG
  function animateSVG() {
    gsap.to("#svg-circle", {
        attr: { r: 50, cx: 150 },
        fill: "#f9ca24",
        duration: 2,
        ease: "elastic.out(1, 0.3)"
    });
  }

  パス描画
  function drawPath() {
      gsap.to("#svg-path", {
          strokeDashoffset: 0,
          duration: 2,
          ease: "power2.out"
      });
  }

  SVGモーフィン
  function morphSVG() {
      gsap.to("#svg-circle", {
          attr: { r: 10, cx: 50 },
          fill: "#45b7d1",
          duration: 1.5,
          ease: "back.out(1.7)"
      });
}

物理演算

HTML

CSS

JavaScript


  <div class="physics-ball" id="physics-ball"></div>
<button onclick="bounce()">バウンス</button>
<button onclick="gravity()">重力</button>
<button onclick="pendulum()">振り子</button>

.physics-ball {
    width: 30px;
    height: 30px;
    background: #ff6b6b;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}


バウンス
function bounce() {
  gsap.set("#physics-ball", { x: 0, y: 0, rotation: 0 }); // リセット
  gsap.to("#physics-ball", {
      y: 80,
      duration: 0.5,
      ease: "power2.in",
      yoyo: true,
      repeat: 5
  });
}

重力
function gravity() {
  gsap.set("#physics-ball", { x: 0, y: 0, rotation: 0 }); // リセット
  gsap.to("#physics-ball", {
      y: 80,
      duration: 1,
      ease: "bounce.out"
  });
}

振り子
function pendulum() {
  gsap.set("#physics-ball", { x: 0, y: 0, rotation: 0 }); // リセット
  gsap.to("#physics-ball", {
      rotation: 45,
      transformOrigin: "50% -30px",
      duration: 1,
      ease: "power2.inOut",
      yoyo: true,
      repeat: 5
  });
}

時計アニメーション

HTML

CSS

JavaScript


  <div class="clock-demo">
    <div class="clock-hand hour-hand" id="hour-hand"></div>
    <div class="clock-hand minute-hand" id="minute-hand"></div>
    <div class="center-dot"></div>
</div>
<button onclick="animateClock()">時計</button>
<button onclick="fastTime()">高速</button>
<button onclick="resetClock()">リセット</button>


  .clock-demo {
    width: 120px;
    height: 120px;
    border: 4px solid #333;
    border-radius: 50%;
    position: relative;
    margin: 20px auto;
}

.clock-hand {
    position: absolute;
    background: #333;
    transform-origin: bottom center;
    border-radius: 2px;
}

.hour-hand {
    width: 4px;
    height: 40px;
    top: 20px;
    left: 50%;
    margin-left: -2px;
}

.minute-hand {
    width: 2px;
    height: 50px;
    top: 10px;
    left: 50%;
    margin-left: -1px;
}


  時計
  function animateClock() {
    gsap.to("#hour-hand", {
        rotation: 720,
        duration: 12,
        ease: "none"
    });
    gsap.to("#minute-hand", {
        rotation: 8640,
        duration: 12,
        ease: "none"
    });
  }

高速
function fastTime() {
    gsap.to("#hour-hand", {
        rotation: "+=360",
        duration: 2,
        ease: "power2.inOut"
    });
    gsap.to("#minute-hand", {
        rotation: "+=4320",
        duration: 2,
        ease: "power2.inOut"
    });
  }

Staggerアニメーション

HTML

CSS

JavaScript

<
  div class="demo-area" id="stagger-area">
    <div class="box stagger-box"></div>
    <div class="box stagger-box"></div>
    <div class="box stagger-box"></div>
    <div class="box stagger-box"></div>
    <div class="box stagger-box"></div>
</div>
<button onclick="staggerWave()">波</button>
<button onclick="staggerRandom()">ランダム</button>
<button onclick="staggerSpiral()">螺旋</button>


  .stagger-box {
    margin: 5px;
    display: inline-block;
}


  波
  function staggerWave() {
    gsap.to(".stagger-box", {
        y: -30,
        duration: 0.6,
        stagger: 0.1,
        ease: "power2.out",
        yoyo: true,
        repeat: 1
    });
}

ランダム
function staggerRandom() {
    gsap.to(".stagger-box", {
        x: () => Math.random() * 100 - 50,
        y: () => Math.random() * 100 - 50,
        rotation: () => Math.random() * 360,
        duration: 1,
        stagger: 0.2,
        ease: "back.out(1.7)"
    });
}

螺旋
function staggerSpiral() {
  gsap.to(".stagger-box", {
    rotation: 360,
    scale: 1.5,
    duration: 1,
    stagger: {
      amount: 1,
      from: "center"
      },
      ease: "power2.out",
      yoyo: true,
      repeat: 1
  });
}

無限ループ

HTML

CSS

JavaScript


  <div class="circle" id="infinite-circle"></div>
<button onclick="infiniteRotation()">無限回転</button>
<button onclick="infinitePulse()">無限パルス</button>
<button onclick="infiniteFloat()">無限浮遊</button>
<button onclick="stopInfinite()">停止</button>


  .circle {
    width: 50px;
    height: 50px;
    background: #4ecdc4;
    border-radius: 50%;
}


無限回転
let infiniteAnimations = [];

function infiniteRotation() {
    const anim = gsap.to("#infinite-circle", {
        rotation: 360,
        duration: 2,
        repeat: -1,
        ease: "none"
    });
    infiniteAnimations.push(anim);
}

無限パルス
function infinitePulse() {
    const anim = gsap.to("#infinite-circle", {
        scale: 1.5,
        duration: 1,
        repeat: -1,
        yoyo: true,
        ease: "power2.inOut"
    });
    infiniteAnimations.push(anim);
}

無限浮遊
function infiniteFloat() {
    const anim = gsap.to("#infinite-circle", {
        y: -20,
        duration: 2,
        repeat: -1,
        yoyo: true,
        ease: "power2.inOut"
    });
    infiniteAnimations.push(anim);
}

停止
function stopInfinite() {
    infiniteAnimations.forEach(anim => anim.kill());
    infiniteAnimations = [];
    gsap.to("#infinite-circle", {
        x: 0, y: 0, rotation: 0, scale: 1,
        duration: 1, ease: "power2.out"
    });
}

全画面統合デモ

すべてのアニメーションを組み合わせた総合デモンストレーション

HTML

CSS

JavaScript


  <div class="demo-area">
    <div class="floating-elements" id="floating-elements"></div>
    <div class="demo-content">
        <h4>すべてのアニメーションを組み合わせた総合デモンストレーション</h4>
        <button onclick="grandFinale()">🎆 グランドフィナーレ 🎆</button>
    </div>
</div>
<button onclick="grandFinale()">🎆 グランドフィナーレ 🎆</button>
<button onclick="createFloatingElements()">浮遊要素作成</button>
<button onclick="clearFloatingElements()">クリア</button>


  .floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.floating-element {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.demo-content {
    position: relative;
    z-index: 1;
    text-align: center;
}


  function grandFinale() {
    const tl = gsap.timeline();
    
    // 画面全体が輝く効果
    tl.to("body", {
        background: "linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #f9ca24 75%, #f0932b 100%)",
        duration: 3,
        ease: "power2.inOut"
    })
    
    // 全ての要素が回転
    .to(".demo-card", {
        rotationY: 360,
        scale: 1.1,
        duration: 2,
        stagger: 0.1,
        ease: "back.out(1.7)"
    }, 0)
    
    // タイトルが踊る
    .to(".main-title", {
        scale: 1.2,
        rotation: 5,
        duration: 1,
        ease: "elastic.out(1, 0.3)",
        yoyo: true,
        repeat: 3
    }, 0.5)
    
    // パーティクル爆発
    .call(() => {
        for (let i = 0; i < 100; i++) {
            setTimeout(() => {
                const particle = document.createElement('div');
                particle.style.position = 'fixed';
                particle.style.width = '10px';
                particle.style.height = '10px';
                particle.style.background = `hsl(${Math.random() * 360}, 100%, 60%)`;
                particle.style.borderRadius = '50%';
                particle.style.left = Math.random() * window.innerWidth + 'px';
                particle.style.top = Math.random() * window.innerHeight + 'px';
                particle.style.zIndex = '9999';
                particle.style.pointerEvents = 'none';
                document.body.appendChild(particle);
                
                gsap.to(particle, {
                    y: window.innerHeight,
                    rotation: 360,
                    opacity: 0,
                    duration: 3,
                    ease: "power2.in",
                    onComplete: () => particle.remove()
                });
            }, i * 20);
        }
    }, [], 1)
    
    // 最後に元に戻す
    .to("body", {
        background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
        duration: 2,
        ease: "power2.out"
    }, 4)
    .to(".demo-card", {
        rotationY: 0,
        scale: 1,
        duration: 1,
        stagger: 0.05,
        ease: "power2.out"
    }, 4)
    .to(".main-title", {
        scale: 1,
        rotation: 0,
        duration: 1,
        ease: "power2.out"
    }, 4);
}

function createFloatingElements() {
    const container = document.getElementById('floating-elements');
    if (!container) return;
    
    for (let i = 0; i < 20; i++) {
        const element = document.createElement('div');
        element.className = 'floating-element';
        element.style.left = Math.random() * 100 + '%';
        element.style.top = Math.random() * 100 + '%';
        element.style.background = `hsl(${Math.random() * 360}, 70%, 60%)`;
        container.appendChild(element);
        
        gsap.to(element, {
            x: Math.random() * 200 - 100,
            y: Math.random() * 200 - 100,
            duration: Math.random() * 4 + 2,
            repeat: -1,
            yoyo: true,
            ease: "power2.inOut"
        });
    }
}

function clearFloatingElements() {
    const container = document.getElementById('floating-elements');
    if (container) {
        container.innerHTML = '';
    }
}

GSAP 完全アニメーションデモ

基本トランスフォーム

イージング効果

カラーアニメーション

テキストアニメーション

シェイプモーフィング

プログレスバー

パーティクル効果

波・液体効果

3D効果

SVGアニメーション

物理演算

時計アニメーション

Staggerアニメーション

無限ループ

全画面統合デモ

すべてのアニメーションを組み合わせた総合デモンストレーション