🎬 GSAP Debug Controller

Advanced Timeline Controller for Rapid Animation Iteration

🎮 How to Use the Debug Panel

Timeline Selection: Choose which timeline to control from the dropdown
Playback Controls: Play, pause, replay, or step frame-by-frame through animations
Speed Control: Adjust playback speed from 0.1x to 4x for detailed inspection
Label Navigation: Jump to specific animation labels instantly
Bookmarks: Save important moments in your timeline for quick reference
Keyboard Shortcuts: Space = Play/Pause, R = Replay, ←→ = Frame Step, B = Bookmark, D = Minimize

👇 Scroll down and click the buttons below to start the animations!
The debug panel will appear at the bottom of the screen.

Demo 1: Complex Timeline with Labels

This demo showcases a multi-step animation with labeled sections. Use the debug panel to navigate between labels.

// Creating a labeled timeline
const mainTL = gsap.timeline({ paused: true });

mainTL
  .add("intro")
  .to(".box1", { x: 200, rotation: 360, duration: 1 })

  .add("sequence")
  .to(".box2", { y: -100, scale: 1.5, duration: 0.8 }, "sequence")
  .to(".box3", { x: -200, rotation: -360, duration: 1 }, "sequence+=0.2")

  .add("finale")
  .to(".box4", { scale: 2, duration: 0.5 })
  .to(".box5", { y: 100, rotation: 720, duration: 1.2 });

// Initialize debug controller
const debugController = new GSAPDebug();
            

Demo 2: Text Animation Timeline

Watch individual characters animate in sequence. Perfect for testing stagger effects.

DEBUG MODE

// Text animation with stagger
const rollTL = gsap.timeline({ paused: true });

rollTL
  .add("start")
  .to("#textDemo span", {
    opacity: 1,
    y: -20,
    stagger: 0.1,
    duration: 0.5,
    ease: "back.out(1.7)"
  })

  .add("bounce")
  .to("#textDemo span", {
    scale: 1.3,
    stagger: 0.05,
    duration: 0.3,
    yoyo: true,
    repeat: 1
  });
            

Demo 3: Particle Animation

A timeline controlling multiple elements simultaneously. Great for performance testing with FPS monitor.

// Particle system animation
const ctaRoll = gsap.timeline({ paused: true });

ctaRoll
  .add("explode")
  .to(".circle", {
    x: "random(-300, 300)",
    y: "random(-200, 200)",
    scale: "random(0.5, 2)",
    opacity: 0.8,
    duration: 1.5,
    stagger: 0.02,
    ease: "power2.out"
  })

  .add("gather")
  .to(".circle", {
    x: 0,
    y: 0,
    scale: 1,
    duration: 1,
    stagger: 0.02,
    ease: "power2.inOut"
  });
            

✨ Key Features

🎯 Multi-Timeline Control

Switch between multiple timelines (mainTL, rollTL, ctaRoll) on the fly. Debug complex animations with ease.

🏷️ Label Navigation

Jump instantly to labeled sections in your timeline. Visual markers show label positions on the scrubber.

⚡ Speed Control

Slow down to 0.1x for frame-perfect timing or speed up to 4x to quickly preview long animations.

📊 FPS Monitor

Real-time performance monitoring. Identify performance bottlenecks with color-coded FPS display.

⌨️ Keyboard Shortcuts

Efficient workflow with shortcuts for all major functions. Speed up your animation debugging process.

🎬 Frame Stepping

Step forward and backward frame-by-frame. Perfect for fine-tuning complex animation sequences.

🚀 Quick Setup

Getting started with GSAP Debug Controller is easy:

// 1. Include GSAP and the Debug Controller
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="gsapDebug.js"></script>

// 2. Create your timelines as usual
const mainTL = gsap.timeline({ paused: true });
mainTL.to(".element", { x: 100 });

// 3. Initialize the debug controller (that's it!)
const debugController = new GSAPDebug();

// The controller automatically detects timelines named:
// mainTL, rollTL, ctaRoll, tl, timeline, masterTL
            