GSAP Canvas — Rendering Patterns

Flow: gsap-setup → gsap-canvas → gsap-optimise → gsap-test

Companion: For GSAP core API reference, invoke gsap-core. For timeline sequencing, invoke gsap-timeline. This skill covers canvas rendering recipes only. Requires: greensock/gsap-skills

1. The Pattern

Canvas animation with GSAP is fundamentally different from DOM animation. GSAP never touches a DOM element directly. Instead:

1. Create plain JS objects with numeric properties (x, y, scale, rotation, alpha).
2. Animate those objects with a GSAP timeline or tween — GSAP interpolates the numbers.
3. Attach an onUpdate callback to the timeline that reads the current object values and draws them to canvas using the Canvas 2D API.