🎬 GSAP Tweens & Timelines

Learn the building blocks of GSAP animations

1. Basic Tweens (gsap.to, from, fromTo)

The simplest way to animate anything with GSAP.

FROM

FROM
TO

// Animate TO values (from current state)
gsap.to('#tween1', { x: 200, duration: 1 });

// Animate FROM values (to current state)
gsap.from('#tween2', { x: -200, opacity: 0, duration: 1 });

// Explicit start and end values
gsap.fromTo('#tween3',
  { scale: 0, rotation: -180 },
  { scale: 1, rotation: 0, duration: 1 }
);

2. Timeline Sequencing

Control multiple animations with perfect timing.

// Sequential animations (one after another)
const tl = gsap.timeline();
tl.to('#seq1', { x: 100, duration: 0.5 })
  .to('#seq2', { x: 100, duration: 0.5 })
  .to('#seq3', { x: 100, duration: 0.5 })
  .to('#seq4', { x: 100, duration: 0.5 });

// Relative positioning for overlap
tl.to('#seq2', { x: 100 }, '-=0.3')  // Start 0.3s before previous ends
  .to('#seq3', { x: 100 }, '<')       // Start with previous
  .to('#seq4', { x: 100 }, '>');      // Start after previous (default)

3. Timeline Defaults & Labels

Set common properties and organize complex sequences.

// Timeline with default properties
const tl = gsap.timeline({
  defaults: { duration: 0.5, ease: 'back.out(1.7)' }
});

tl.to('#label1', { x: 100, rotation: 360 })
  .to('#label2', { x: 100, scale: 1.5 })
  .to('#label3', { x: 100, y: -50 });

// Using labels for scene management
tl.add('scene1')
  .to('#label1', { x: 100 })
  .add('scene2', '+=0.5')
  .to('#label2', { x: 100 }, 'scene2')
  .to('#label3', { x: 100 }, 'scene2+=0.3');

// Jump to label
tl.seek('scene2');

💡 Key Concepts:

Tweens are individual animations (to, from, fromTo)
Timelines sequence multiple tweens with precise control
Defaults reduce code repetition by setting common properties
Labels create named positions in timelines for complex choreography
Relative positioning ('-=0.5', '<', '>') creates overlaps and gaps