animating-overlayslisted

# Animating Overlays (keyframes) Use this when the user wants an overlay to **move, slide, zoom, spin, or fade** — an overlay's **position / scale / rotation / opacity** changing from one value to another over a window of time. The rule is simple: > **Animate transforms + opacity with KEYFRAMES, never with a code draw > function.** A keyframed transition shows as draggable diamonds on the timeline, > can be re-timed, re-curved (curve editor), and deleted. The same motion baked > into a `code` overlay's `draw.jsx` is opaque — the user can't see it, can't > re-time it, and can't hand it off. Keyframes keep the motion on the surface. ## The crisp boundary — keyframes vs. draw-fn vs. reveal vs. effect | The user wants… | Use | Why | | --- | --- | --- | | an overlay to **move / slide / zoom / spin / fade** (a one-way A→B transition of position/scale/rotation/opacity) | **KEYFRAMES** (`add_keyframe`) | visible diamonds, re-timable, curve-editable | | looping / parametric motion — **bob, shake, pulse, float, wiggle** | an **effect** (`apply_layer_effect` / `add_effect`) | a reusable `(progress)→TransformDelta`, shows in the Effects panel | | **text reveal** — typewriter, word-by-word, karaoke, paint-on | `reveal` on a `kind: "text"` overlay (skill: `animated-text-overlays`) | native, element-local reveal | | motion that is NOT a whole-overlay transform — particles, a data-driven chart drawing itself, per-element generative canvas art | a `code` overlay `draw.jsx` (skill: `animat