Code

GSAP

Tweens

gsap.to(), gsap.from(), gsap.fromTo() — the three core tween methods

Timeline

Sequence and overlap tweens with gsap.timeline() and position parameters

Easing

Visual comparison of built-in ease functions: power, elastic, bounce, back

Stagger

Cascade animations across a grid of elements with the stagger option

ScrollTrigger

Animate elements on scroll with the ScrollTrigger plugin and scrub

MotionPath

Move elements along SVG paths with autoRotate using MotionPathPlugin

FLIP

Smooth layout transitions — capture state, mutate DOM, animate with Flip.from()

Generative Art

Algorithmic particle system with orbital motion, hue cycling, and pulse animations

Generative Art

Expert 60 DOM particles with algorithmically varied orbits, hue cycling, and scale pulsing. Each particle is an independent set of looping tweens — emergent visual patterns arise from the overlapping motion. GSAP Docs

// Place randomly in stage
gsap.set(dot, {
  x: cx, y: cy,
  width: p.size, height: p.size,
  borderRadius: '50%',
  background: `hsl(${p.hue}, 80%, 60%)`,
});

// Orbital loop
const tl = gsap.timeline({ repeat: -1 });
tl
  .to(dot, {
    x: `+=${cos * radius}`,
    y: `+=${sin * radius}`,
    duration: speed,
    ease: 'sine.inOut',
  })
  .to(dot, {
    x: `-=${cos * radius}`,
    y: `-=${sin * radius}`,
    duration: speed,
    ease: 'sine.inOut',
  });

// Hue-rotate via CSS filter
gsap.to(dot, {
  filter: 'hue-rotate(180deg)',
  duration: 3, repeat: -1, yoyo: true,
});

// Scale + opacity pulse
gsap.to(dot, {
  scale: 0.5 + rand * 1.2,
  opacity: 0.3 + rand * 0.7,
  duration: 1.5 + rand * 2,
  repeat: -1, yoyo: true,
  ease: 'sine.inOut',
});