Remotion Animating Properties

Remotion에서 애니메이션의 본질은 시간에 따른 속성 변화다. 가장 단순한 페이드인부터 interpolate()·spring() 헬퍼까지 단계별로 정리한다.

---

1️⃣ 직접 계산하기 (가장 단순)

60프레임 동안 opacity를 0 → 1로 페이드인:

import { AbsoluteFill, useCurrentFrame } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 60);

  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white",
        fontSize: 80,
      }}
    >
      <div style={{ opacity }}>Hello World!</div>
    </AbsoluteFill>
  );
};

---

2️⃣ interpolate() 헬퍼

수동 계산보다 가독성 좋고, 범위 매핑·외삽(extrapolation)·이징(easing)을 한 번에 처리한다:

import { interpolate, useCurrentFrame } from "remotion";

const frame = useCurrentFrame();

const opacity = interpolate(
  frame,
  [0, 60],        // 입력 프레임 범위
  [0, 1],         // 출력 값 범위
  { extrapolateRight: "clamp" }  // 60 이후엔 1로 고정
);

주요 옵션:

• extrapolateLeft / extrapolateRight — 범위 밖 처리 (clamp / extend / wrap / identity)
• easing — 베지어 ((t) => t * t) 같은 함수로 곡선

---

3️⃣ spring() 헬퍼 (탄성 애니메이션)

스프링 시뮬레이션으로 자연스러운 바운스 효과. 기본값은 0 → 1:

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

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

  const scale = spring({ fps, frame });

  return (
    <div style={{ flex: 1, textAlign: "center", fontSize: "7em" }}>
      <div style={{ transform: `scale(${scale})` }}>Hello World!</div>
    </div>
  );
};

기본 설정은 약간의 오버슈트(튕김)가 있다. config 옵션으로 댐핑·강도 등을 조정할 수 있다:

spring({ fps, frame, config: { damping: 200 } })  // 덜 튕김

---

⚠️ 꼭 useCurrentFrame()으로 구동할 것

CSS transition처럼 useCurrentFrame 기반이 아닌 애니메이션은 렌더링 시 깜빡임(flickering)을 일으킬 수 있다. 항상 useCurrentFrame() → interpolate() 또는 spring() 패턴을 따른다.

자세한 원리: How Remotion's rendering works

---

📚 영역 구분

• 컴포넌트 재사용: Remotion Reuse Components
• 트랜지션: Remotion 비주얼 & 미디어 → Transitions
• 한글 hub: Remotion 시작하기

상위 문서: ← Remotion 시작하기 출처: Remotion 공식 문서 — Animating properties 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

날짜	변경
2026-07-29	초판 작성 (공식 Animating properties 가이드 한글화)
2026-07-29	메타데이터 블록을 본문 하단으로 이동