GSAP Basics: Timeline and from/to Animations

Sequencing multiple CSS animations manually with delays is fragile. Changing one duration breaks all subsequent timings.

Use GSAP's gsap.timeline() to chain animations sequentially. Each .to(), .from(), or .fromTo() call is automatically placed after the previous one.

import gsap from 'gsap';

const tl = gsap.timeline({ defaults: { duration: 0.4, ease: 'power2.out' } });

tl.from('.hero-title', { opacity: 0, y: 40 })
  .from('.hero-subtitle', { opacity: 0, y: 20 }, '-=0.2') // overlap by 0.2s
  .from('.hero-cta', { opacity: 0, scale: 0.9 }, '-=0.2');

// Single tween
gsap.to('.box', { x: 200, rotation: 360, duration: 1, ease: 'bounce.out' });

// Targeting a ref in React
const ref = useRef(null);
useEffect(() => {
  gsap.from(ref.current, { opacity: 0, y: 30, duration: 0.5 });
}, []);

Timelines decouple timing offsets from absolute durations. Inserting a new animation into the middle of a sequence only requires adjusting the overlap offset, not recalculating all subsequent delays.