# Generating short animated clips with Claude — GSAP composition capabilities and limits

> VideoBuff's add_composition feature lets Claude author SVG + GSAP code rendered to MP4 animated clips via an in-browser iframe + WebCodecs, inserted directly onto the timeline. Useful for kinetic typography, animated titles, and simple motion graphics. We cover the capability surface, current output quality, constraints, and recommended workflow candidly.

_Last updated: 2026-05-04 · First published: 2026-05-04_

## What is happening technically

add_composition has Claude author SVG markup + a GSAP timeline script, mounts it in an off-screen browser iframe, seeks the timeline frame by frame, rasterises each frame as SVG, encodes the sequence into MP4 via WebCodecs, and inserts the resulting clip onto a video track.

The output is a regular MP4 clip — you can trim it, color grade it, attach transitions, and combine it with other VideoBuff features afterwards. It is not a "special live object," just a video clip.

Rendering happens entirely in your own browser tab. Neither the SVG / GSAP source nor the encoded output ever leaves your device. GSAP is bundled under the Webflow Standard License (see the Open-Source Licenses page for details).

## When it works well

What today's output reliably handles is short animations whose function is unambiguous.

- **Animated titles** — text fading / scaling / sliding in over 3–5 seconds for an opener
- **Kinetic typography** — short phrases (a handful to ~10 words) revealing word-by-word with stagger
- **Lower thirds** — name / role lines sliding in from the lower-left
- **Numeric counters** — animated count-ups like 0 → 1,000,000
- **Simple shape morphing** — icons or shapes smoothly transitioning between forms (MorphSVG)
- **Motion-path movement** — arrows or symbols travelling along a curved path

The sweet spot is short, function-clear cuts with few elements and a typography-first focus.

## Where it falls short — current output quality

For honest expectation-setting: **today's output does not reach the quality of professional work made in After Effects / Cinema 4D / Lottie**.

As with the mechanical-operation surface (add_clip / color grading / transitions), abstract aesthetic prompts remain weak.

- Tone-only directives like "make it cinematic," "make it cool," "TikTok-style," "punchy opener" tend to land somewhere around a generic fade-in
- Font choices and layout still depend on Claude's judgement, with notable variance between hits and misses
- Complex scene composition, depth, 3D-style camera moves, realistic textures, particle effects are structurally out of reach (SVG-based pipeline)
- Video overlay, photo compositing, and video-effect integration cannot happen inside a composition — those need to be layered separately via add_clip

**Additional structural constraints**:

- Max 30 seconds, max 60fps, output resolution up to 4K
- SVG-only. HTML / foreignObject is blocked by WebCodecs' tainted-canvas rules
- Scroll / pointer / wheel events never fire in the encode environment, so ScrollTrigger / Draggable plugins don't apply
- Text in a finished composition cannot be re-edited directly — replacing copy requires regenerating the clip

Long-form, intricate motion graphics work and "just make it look great" intents are not yet served. Output stability scales with how concretely the motion intent is described — "slide in from the left over 0.4 s, hold 0.6 s, then the next word" yields better results than "make a cool intro."

## Workflow: dryRun → render

A real composition render takes a few seconds for SVG rasterisation + WebCodecs encoding. Iterating on prompts with full encodes burns time fast — the dryRun fast-path exists to avoid that.

**dryRun: parse + validate + diagnose only**

Passing `options.dryRun: true` to `add_composition` mounts the iframe, evaluates the SVG / GSAP timeline, returns errors and warnings, and then skips encoding. No clip is inserted onto the timeline. Three diagnostic kinds come back:

- **script-error** — the agent's `<script>` threw an uncaught exception (e.g. died midway through building the timeline)
- **no-animation** — the GSAP timeline duration is 0 (no tweens registered — effectively a static frame)
- **text-overflow** — a `<text>` element extends past the canvas boundary (oversized font or copy that's too long)

**Recommended flow**

1. Have Claude draft a few variations with dryRun
2. Read the diagnostics; discard prompts that produced no-animation or text-overflow
3. Render the survivors with `options.dryRun: false` for real

This skips the "spend 5 seconds encoding, then notice the text was clipped" failure mode. The same diagnostics are returned on real renders too, so warnings remain visible after rendering.

## Available GSAP features

The composition iframe pre-registers these GSAP plugins (no `registerPlugin` call needed):

- **DrawSVGPlugin** — progressively draws an SVG path's stroke (line-drawing-on animation)
- **MorphSVGPlugin** — smooth morphing between shapes
- **MotionPathPlugin** — move elements along an arbitrary path
- **TextPlugin** — rewrite text content one character at a time (typewriter)
- **ScrambleTextPlugin** — scramble characters and progressively settle to the final string
- **Physics2DPlugin / PhysicsPropsPlugin** — gravity / velocity / friction simulation
- **CustomEase / CustomBounce / CustomWiggle** — author arbitrary easing curves
- **EasePack** — extended easing set (rough, slowMo, expoScale, etc.)

**Deliberately omitted**

- **SplitText** — assumes the HTML DOM and cannot inject child wrappers into SVG `<text>`, so it does not work
- **ScrollTrigger / ScrollSmoother / ScrollToPlugin / Observer / Draggable / Inertia** — scroll / pointer events do not fire in the encode environment
- **Flip** — depends on `getBoundingClientRect` and does not behave correctly on an off-screen-iframe SVG
- **GSDevTools / MotionPathHelper** — editor GUI dev tools, irrelevant during a real render

The core GSAP API (`gsap.to` / `gsap.from` / `gsap.fromTo` / `gsap.timeline` / `stagger` / all standard eases) works as expected.

## When to choose composition vs add_clip + transition

Composition is powerful but rarely the first reach. Simple expressions are lighter and stay editable longer with `add_clip` + `transition`.

**`add_clip` + `transition` is enough when**

- You want a single fade / zoom / blur / dissolve effect on static text
- You want to edit the text content later (composition output is MP4 — copy changes require regenerating the clip)
- You'll combine with color grading or audio effects on the same clip

**`add_composition` is needed when**

- Character-level stagger (words appearing one at a time, dancing letters, kinetic typography)
- Multiple elements interleaved on a timeline (title → subtitle → arrow → icon in sequence)
- Path morphing, motion-path travel, physics simulation
- Dynamic text behaviour like numeric counters or scrambling text

**Rule of thumb**: ask "does the motion only express itself across multiple chained timeline.to(...).to(...).to(...) calls?" If yes, composition. If no, add_clip + transition is usually cheaper.

Claude tends to gravitate toward composition when you say "make a title animation" — but for "white text title with a 1-second fade-in," add_clip + transition is faster and stays re-editable when you later say "change the title to X."