Animations & Effects

Master Remotion's animation system with spring physics, interpolation, easing functions, parallax, SVG animations, and learn how to prompt Claude Code for complex effects.

Spring Animations

Springs create natural, physics-based motion. They are the recommended way to animate in Remotion:

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

export const BounceIn = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const scale = spring({
    frame,
    fps,
    config: {
      damping: 10,      // Lower = more bouncy
      stiffness: 100,   // Higher = faster
      mass: 0.5,        // Lower = lighter feel
    },
  });

  return (
    <div style={{ transform: `scale(${scale})` }}>
      Bounce!
    </div>
  );
};

Interpolation

The interpolate() function maps frame numbers to output values. It is the core building block for all animations:

import { interpolate, useCurrentFrame } from "remotion";

export const SlideIn = () => {
  const frame = useCurrentFrame();

  // Slide from -100px to 0px over frames 0-30
  const translateX = interpolate(
    frame,
    [0, 30],       // Input range (frames)
    [-100, 0],     // Output range (pixels)
    { extrapolateRight: "clamp" }
  );

  // Fade from 0 to 1 over frames 0-20
  const opacity = interpolate(
    frame, [0, 20], [0, 1],
    { extrapolateRight: "clamp" }
  );

  return (
    <div style={{
      transform: `translateX(${translateX}px)`,
      opacity,
    }}>
      Sliding Text
    </div>
  );
};

Easing Functions

Easing functions control the rate of change in animations. Remotion provides built-in easing functions:

Parallax Effects

Create depth by moving background and foreground elements at different speeds:

"Create a parallax scrolling scene with 3 layers:
- Background (mountains): moves slowly at 0.2x speed
- Midground (trees): moves at 0.5x speed
- Foreground (text): moves at 1x speed

All layers scroll from right to left over 5 seconds.
Use colored shapes to represent each layer. The
parallax should create a sense of depth."

SVG Animations

SVGs render crisply at any resolution, making them ideal for video graphics:

• Path drawing: Animate SVG paths from empty to fully drawn using strokeDashoffset
• Morphing: Transition between SVG shapes by interpolating path data
• Icons: Animate individual parts of SVG icons for visual interest
• Charts: Build animated pie charts, line graphs, and diagrams with SVG

Lottie Integration

Use Lottie animations (from LottieFiles or After Effects) in your Remotion videos:

"Install @remotion/lottie and add a Lottie animation
from the file public/animation.json. The animation
should play from frame 0 to completion, centered
on screen. Add a text overlay below it that says
'Loading...' with a pulsing opacity animation."

Transition Effects

Common transitions between scenes that you can ask Claude Code to create:

• Crossfade: One scene fades out while the next fades in
• Slide: New scene slides in from a direction, pushing the old scene out
• Wipe: A shape or line reveals the new scene progressively
• Zoom: Camera zooms into the old scene and zooms out to reveal the new one
• Dissolve: Pixel-by-pixel transition using noise patterns

Prompting Claude Code for Complex Animations

When requesting complex animations from Claude Code, be specific about: