😩 The problem before GSAP
Animating elements with pure CSS for video is painful: manual keyframes, eyeballed timing, and no way to choreograph complex sequences. GSAP solves this with a clear, precise API.
✗ Plain CSS for video animation
- ✗Manual timing for each keyframe—prone to errors.
- ✗Chained sequences require manually calculating delays.
- ✗No programmatic control — you can’t “pause halfway through.”
✓ GSAP for video animation
- ✓Declarative timeline—each element enters at the right time.
- ✓Relative positioning: "<0.3" = 300ms after the previous one.
- ✓Seek to any frame — natural integration with Remotion.
⌛ Stagger — cards entering in sequence
O stagger is the progressive delay between elements in a group. Instead of all of them coming in at the same time, each one waits a little for the previous one — creating a professional "cascade" effect.
↑ Each card enters 250ms after the previous one. In GSAP: stagger: 0.25
gsap.from(".card", {
y: 22,
opacity: 0,
duration: 0.55,
ease: "power2.out",
stagger: 0.25 // 250ms entre cada card
});🎯 Easing — the curve that sets the tone
Linear feels robotic. Ease-out feels natural. Elastic feels playful. The easing choice is just as important as the movement itself—it communicates the animation’s personality.
💡 Golden tip
For UIs and slides use power2.out — comes in fast and settles. For elements that exit use power2.in — starts gently and exits at speed. Set aside elastic for specific moments of emphasis.
🎼 Choreographed timeline
A Timeline GSAP is an animation conductor: you define when each element enters in relation to the previous one, creating complex choreography with simple code.
const tl = gsap.timeline();
tl.from("#elem-a", { x: -40, opacity: 0, duration: 0.6 })
.from("#elem-b", { y: 20, opacity: 0, duration: 0.5 }, "<0.3")
.from("#elem-c", { x: 40, opacity: 0, duration: 0.7 }, "<");🔗 GSAP + Remotion — Frame-Perfect Integration
Remotion renders each frame deterministic — for the same frame number, always the same visual. GSAP respects this via seek(): instead of running the animation in real time, you “jump” to the exact frame.
🧠 Core concept
In Remotion, useCurrentFrame() returns the current frame (e.g., 60 at 30fps = 2 seconds). You convert this frame to "seconds" and call tl.seek(seconds) — GSAP positions all elements in the correct state for that moment.
const { fps } = useVideoConfig();
// Seek to the exact second of this frame
tl.seek(frame / fps);
💡 Why not use CSS animations?
CSS animations don't have seek(). Remotion takes screenshots frame by frame—without seeking, the animation would always appear in the t=0 state. GSAP handles this natively.
🚀 From landing page to video — the workflow with Claude
The most productive approach: ask Claude for a static landing page first — ready-made visual components, typography, colors, spacing. Then, in a second conversation, ask to turn it into a GSAP animation for Remotion.
Layout prompt
"Create a React landing page for a SaaS with a hero, 3 features, and a CTA. No animations yet."
Visual review
Adjust colors, typography, and spacing. Make sure the visuals are right before animating.
Transformation prompt
"Now turn it into a Remotion composition with GSAP. Hero fades up, features stagger by 0.2s, CTA bounces."
Render and export
npx remotion render — MP4 ready to publish.
🎯 Best for
SaaS intros, launch videos, product walkthroughs, pitch slides — any content with a section structure and progressive reveals.
📋 Module Summary
What we learned
- ✓GSAP is the web animation standard for its precision and clear API
- ✓Stagger creates professional cascades with one line of code
- ✓Easing defines the animation’s personality
- ✓Timeline choreographs complex sequences with relative positioning
- ✓seek() integrates GSAP with Remotion’s deterministic rendering
- ✓Landing page → video workflow maximizes production speed
Next module
Detailed comparison: when each tool shines and why GSAP wins for rendered video.