🎯 Two completely different paradigms
GSAP and Framer Motion aren’t competing—they serve opposing contexts. One is built for maximum control over time; the other is built to respond to the user. Understanding this fundamental difference saves hours of frustration.
🟢 GSAP — the time paradigm
- ✓Based on an absolute timeline—t=0 is always the same.
- ✓Seek() to any point in time.
- ✓Rendered frame ≡ frame in the final video.
⚛️ Framer Motion — state paradigm
- →Physics-based—spring, inertia, drag.
- →Animations triggered in response to interactions.
- →The result depends on user timing — it’s nondeterministic.
📊 Decision Matrix
Use this table as a quick reference. Before choosing a library, identify the consumption context: rendered video (MP4) or interactive interface (browser/app).
| Criterion | GSAP | Framer Motion |
|---|---|---|
| Rendered video (Remotion) | ✓ Ideal | ✗ Doesn't work |
| Deterministic animation | ✓ Native | ✗ Depends on interaction |
| Hover / drag / gestures | Possible, but verbose | ✓ Native and elegant |
| UI prototyping | Can be used | ✓ Much faster |
| Layout animations (reflow) | Manual | ✓ AnimatePresence |
| Seek to a specific frame | ✓ tl.seek() | ✗ Doesn't exist |
| Choreographed timeline | ✓ Core feature | Possible, but limited |
| Browser performance | ✓ Excellent | ✓ Very good |
🎬 Side-by-side demonstration
Left: choreographed timeline (GSAP) — A ends, B starts, C overlaps. Right: “reactive” card (Framer Motion style) — hover/scale loop that doesn't make sense in a rendered video, since nobody will hover over an MP4.
✓ Deterministic — same result in any render
✗ Hover doesn't exist in MP4 — this pattern doesn't generate video
💡 The golden rule
If your final product is a video file, use GSAP. If it’s a interface the user will interact with, Framer Motion saves code.
🔬 Why GSAP Is Deterministic and Frame-Based
Remotion renders frames headless: it “freezes” time on each frame, takes a screenshot, and moves to the next one. For this to work, the visual state must be 100% dependent on the frame number—never on the system clock.
🧠 The problem with requestAnimationFrame
CSS animations and Framer Motion use requestAnimationFrame — they depend on the real clock. When Remotion renders frame 60, it doesn't "wait 2 real seconds"; it jumps straight there. CSS animations would always be at t=0.
@keyframes fade { from { opacity:0 } to { opacity:1 } }
// ✓ GSAP + seek — goes exactly to the correct frame
tl.seek(frame / fps); // frame=60, fps=30 → seek(2.0)
✗ Not deterministic
- ✗CSS
animation— clock-based - ✗Framer Motion spring — variable physics
- ✗setTimeout/setInterval — imprecise timing
✓ Deterministic for Remotion
- ✓GSAP with
tl.seek() - ✓
interpolate(frame, [...])native Remotion - ✓Remotion spring (not Framer)
✅ When Framer Motion still makes sense
Framer Motion isn’t inferior — it’s different. There are contexts where it saves days of work. The key is not to confuse it with the final product.
Rapid prototyping
Show a UI idea to the client in hours. Framer Motion + shadcn = a prototype in an afternoon.
React apps with route transitions
AnimatePresence makes component enter/exit transitions trivial. It’s impossible to replicate this as simply with GSAP.
Drag and gestures
Draggable dashboards, carousels with inertia, kanban boards. Framer makes them trivial.
Rendered Remotion video
Framer Motion doesn't work here — without seek(), spring physics is indeterministic, so the final result is unpredictable.
💬 How to Ask Claude for the Right Tool
Claude knows both libraries, but you need to make the context explicit. Without context, Claude may generate Framer Motion code for a Remotion video—and that won’t work.
✗ Vague prompt
"Animate these cards as they enter the screen"
Claude can use CSS, Framer, or GSAP—luck determines the result.
✓ Contextualized prompt
"I'm using Remotion 4 with GSAP. Animate these cards with a 0.2s stagger, fade-up, using tl.seek(frame/fps)"
Guaranteed, correct result.
💡 Prompt template for GSAP + Remotion
"Create a Remotion composition with GSAP. Use tl.seek(frame/fps) to synchronize. [describe the animation]. FPS: 30, duration: [Ns]."
📋 Module Summary
What we learned
- ✓GSAP and Framer serve opposite paradigms
- ✓Rendered video requires determinism — GSAP + seek()
- ✓Framer Motion shines in prototyping and interactive UI
- ✓CSS animations are incompatible with headless rendering
- ✓Context in the prompt ensures Claude chooses the right tool
Next module
When the data itself is the animation. Bar races, architecture diagrams, and visualizations Claude generates from a CSV.