Trail map
Six modules covering each library in depth — click to jump straight to one.
Detailed content
🟢 GSAP — frame-perfect timeline
The standard web animation library. Timeline choreography, stagger, and professional easing for slide deck style videos.
What it is: GreenSock Animation Platform — the most widely used JavaScript library for high-performance web animation.
Why learn: Precise timing control, professional easing, and natural integration with Remotion.
Key concepts: gsap.to(), gsap.from(), timeline, stagger, ease.
What it is: Chained animations where each piece appears at exactly the right moment.
Why learn: It’s the foundation for slide-deck-style videos where each section is revealed in sequence.
Key concepts: timeline.to(), position param, overlap with "<0.3", labels.
What it is: Animations that cascade with controlled delays.
Why learn: Cards entering in sequence are a hallmark of the best product videos.
Key concepts: stagger: 0.1, from: "center", each, amount.
What it is: The velocity curve that makes the animation feel physical or smooth.
Why learn: Linear feels robotic; ease-out feels natural. The choice sets the tone.
Key concepts: power1-4, back, elastic, bounce, CustomEase.
What it is: Use GSAP to choreograph React elements rendered frame by frame by Remotion.
Why learn: Remotion renders each frame—GSAP translates “progress” into CSS values perfectly.
Key concepts: useCurrentFrame, interpolate, gsap.globalTimeline.
What it is: The approach of asking Claude for a static landing page and then turning it into a GSAP animation.
Why learn: Reusing ready-made components greatly speeds up video production.
Key concepts: transformation prompt, separation of concerns, animation layers.
⚖️ GSAP × Framer Motion
Precise timeline control vs. reactive physics. Why GSAP wins for rendered video.
What it is: Animations controlled by absolute time — always the same in every render.
Why learn: Frame-by-frame rendering requires determinism: same frame = same visual.
Key concepts: deterministic timeline, position param, seek(), globalTimeline.
What it is: Interaction-driven animations — hover, drag, layout reflow.
Why learn: Best for UI prototypes and interactive demos (not rendered video).
Key concepts: motion.div, whileHover, spring physics, AnimatePresence.
What it is: Comparison table to decide which library to use for each scenario.
Why learn: Prevents using the wrong tool in the wrong context.
Key concepts: rendered video, prototyping, interactive UI, presentation.
What it is: A ends, B starts 0.3s later, and C overlaps B by 0.1s.
Why learn: This relative positioning pattern is the heart of visual storytelling.
Key concepts: position param "<", "<0.3", "+0.5", named labels.
What it is: A rendered video means no one will interact with it. Hover and drag don’t exist in an MP4.
Why learn: Understanding the limitation helps you avoid the wrong stack choices.
Key concepts: headless render, frame by frame, lack of interactivity.
What it is: UI prototypes, interactive client demos, web apps with transitions.
Why learn: Having both tools in your arsenal helps with different contexts.
Key concepts: rapid prototyping, layout animation, shared layout transitions.
📊 D3.js — Data Is the Content
A data visualization pattern. Static data becomes rich animations—you don’t draw anything; the data does the work.
What it is: Data-Driven Documents — automatically binds data to DOM/SVG elements.
Why learn: Any dataset can become an animated chart without drawing it manually.
Key concepts: data binding, scales, selections, enter/update/exit.
What it is: Bars that grow and reorder over time, representing shifting rankings.
Why learn: It’s the standard for any temporal comparison of categories.
Key concepts: reordering keyframes, smooth transitions, d3.transition().
What it is: Nodes appear in sequence, and lines draw in to connect the topology.
Why learn: Explains complex systems visually and progressively.
Key concepts: force layout, stroke-dashoffset, sequential reveal, node-link.
What it is: The approach—you provide the dataset and describe the visual; Claude generates complete D3.
Why learn: You don’t need to know D3; you need to know what you want to show.
Key concepts: data prompt, CSV/JSON, visual specification, iteration.
What it is: Growth routes, geographic data heat maps, user journeys.
Why learn: Geographic data tells unique stories that ordinary charts can’t.
Key concepts: d3.geoProjection, topojson, choropleth, path animation.
What it is: Charts, architecture diagrams, route maps — anything data-driven.
Why learn: Knowing which tool to choose for each type of data saves rework.
Key concepts: choice of chart type, continuous vs. categorical data, hierarchies.
🧊 Three.js — WebGL and 3D in video
3D scenes rendered frame by frame. Materials, cameras, and procedural geometry for 3D motion graphics.
What it is: Three.js integration with Remotion: each video frame is a WebGL render synchronized with the composition’s timing.
Why learn: Lets you create motion graphics with geometry, light, and depth that are impossible to replicate with CSS or SVG.
Key concepts: useCurrentFrame(), renderer.render(), canvas as the image source, frame determinism.
What it is: Using pure Three.js — Scene, Camera, Renderer, Mesh — with no additional abstraction layers.
Why learn: Full control over the WebGL pipeline; ideal when maximum performance or custom shaders are needed.
Key concepts: WebGLRenderer, PerspectiveCamera, BoxGeometry, MeshStandardMaterial, animationLoop replaced by frame.
What it is: React wrapper for Three.js — write 3D scenes in JSX, with reusable components and hooks.
Why learn: Integrates naturally with Remotion’s component model; code is more readable and easier to iterate on with Claude.
Key concepts: <Canvas>, <mesh>, <ambientLight>, useFrame() replaced by useCurrentFrame(), drei helpers.
What it is: Configure lights (ambient, directional, point) and materials (basic, standard, physical) to define appearance and realism.
Why learn: Lighting is what transforms a generic cube into an object with a visual identity — essential for premium motion.
Key concepts: AmbientLight, DirectionalLight, MeshPhysicalMaterial, roughness, metalness, envMap.
What it is: Camera movement around objects using trigonometry or easing mapped to frames.
Why learn: A moving camera creates narrative depth — turning static renders into 3D cinematography.
Key concepts: camera.position, lookAt(), Math.sin/cos for orbit, position interpolation with spring().
What it is: Objective criteria for choosing between pure Three.js and React Three Fiber for each project.
Why learn: The right choice saves rework—R3F is better for complex compositions; Vanilla for shaders and critical performance.
Key concepts: reconciliation overhead, drei ecosystem, direct GPU access, integration with React state.
✨ Lottie — JSON animation
Export from After Effects / Figma to JSON and reproduce it perfectly at any size.
What it is: Lottie as the most direct route from a ready-made animation to video: JSON file → Remotion component → render.
Why learn: Eliminates manual animation code—you describe the look, get a JSON file, and add it to the video in minutes.
Key concepts: lottie-web, @remotion/lottie, LottieAnimation component, loop and autoplay controlled by frame.
What it is: The principle that narrowly scoped Lottie animations (icon, loader, simple illustration) produce reliable, lightweight JSON.
Why learn: Complex animations produce fragile JSON; splitting them into small pieces ensures consistent quality.
Key concepts: scene breakdown, JSON file size, named layers, animation versioning.
What it is: LottieFiles and other sources of ready-made JSON animations that are free and licensed for production use.
Why learn: Reusing validated animations speeds up production — you don’t need to create from scratch what already exists.
Key concepts: lottiefiles.com, license filter, preview, JSON download, color customization via online editor.
What it is: Using Lottie for small reinforcing animations — checkmarks, loaders, icons that “come to life” at key moments in the video.
Why learn: Micro-interactions increase perceived quality without a proportional increase in production costs.
Key concepts: entrance timing, playbackRate, animation segments, narration sync.
What it is: Lottie as the default choice for onboarding sequences — animated illustrations that explain app flows.
Why learn: A lightweight, scalable format that reproduces perfectly at any resolution — ideal for product videos.
Key concepts: onboarding storyboard, transitions between screens, duration per step, caption integration.
What it is: Lottie for brand identity animations on social media — animated logos, intros, bumpers, and transitions.
Why learn: Producing branded content at scale — reusing a Lottie animation across dozens of videos maintains a consistent identity without rework.
Key concepts: brand palette in JSON, reusable animations as components, color variants for different campaigns.
🗺️ Decision map — which library to use
Complete flowchart for choosing the right library based on content type, timeline, and complexity.
What it is: GSAP selection criterion: any scene where multiple elements need to appear in sequence with precise timing.
Why learn: Knowing when to choose GSAP avoids using a heavier library when a timeline would do.
Key concepts: slide deck, sequential reveal, stagger, expressive easing, full Remotion compatibility.
What it is: D3 selection criterion: whenever the content is derived from a dataset — the data is the main character.
Why learn: D3 automatically turns numbers into geometry; trying to do this manually with another library would be inefficient.
Key concepts: data binding, scales, animated charts, network diagrams, geographic maps.
What it is: Three.js selection criterion: any scene that requires real depth, procedural geometry, or physically based light rendering.
Why learn: Three.js has a higher setup cost—using it only when 3D is truly necessary avoids unnecessary complexity.
Key concepts: 3D objects, perspective camera, shader, PBR materials, interactive or cinematic scenes.
What it is: Lottie selection criterion: illustration animations, icons, micro-interactions — where lightness and delivery speed matter more than control.
Why learn: Lottie eliminates animation code — you deliver faster and with fewer bugs when the scope is a good fit.
Key concepts: Pre-animated JSON, zero interpolation code, scalable, onboarding and social clips.
What it is: Direct comparison between GSAP (imperative timeline control) and Framer Motion (declarative, React state-driven animation).
Why learn: Both are valid in Remotion—the wrong choice creates rework; understanding the differences saves time.
Key concepts: GSAP for precise choreography, Framer Motion for prototyping and interactive UI, with some overlap in use cases.
What it is: Decision framework with 4 rules: install the right library, start simple, iterate with Claude, render correctly.
Why learn: Having an explicit decision-making process eliminates choice paralysis and ensures consistency across projects.
Key concepts: installation criteria, MVP first, AI iteration cycle, render validation before scaling.