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

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."