Animated Subtitles for Video

Animated Subtitles for Video

Make captions feel polished with enter and exit animations. Each phrase animates independently: fade in from transparent, slide up from below, scale from small, or combine effects. Animations render identically in the preview and the final export.

How It Works

1. Open animation settings: find the animation controls in the caption style panel. Enter and exit animations are configured separately.

2. Choose enter effects: select one or more effects for how the caption appears:

   • Fade: opacity 0 to 1
   • Slide: from top, bottom, left, or right (100% of viewport distance)
   • Scale: grow (small to full) or shrink (large to full)

3. Choose exit effects: select how the caption disappears before the next phrase appears. Same options as enter: fade, slide, scale.

4. Preview the result: play the video in the editor. Animations run in real-time in the preview player. Each phrase animates independently based on its timeline position.

5. Stack multiple effects: combine fade with slide for a “fade-slide” entrance, or fade with scale for a “fade-zoom” effect. All active effects interpolate simultaneously.

Key Details

Frame-based animation. Animations use Remotion’s interpolate function, so each frame is rendered independently. CSS transitions do not work in frame-by-frame rendering.

Duration is approximately 400ms. Animations span ~12 frames at 30fps. This is consistent for all effect types and can’t be overridden per-phrase.

Preview matches export exactly. Both the live editor preview and the Remotion export use the same applyAnimations function. If it looks right in the preview, it will look right in the export.

What’s Next

• Caption Styling: fonts, colors, and visual properties for your captions
• Per-Phrase Caption Positioning: combine animations with position changes per phrase
• Text Overlays: text overlays use the same animation system