scale(${scale}), opacity, }} />

Next Steps Integrate into constants.ts in composition folder Use in component implementation via /remotion-component-gen Test animation feel in Remotion preview Adjust parameters if timing feels off Document final values for consistency Checklist Spring configs defined Interpolation ranges specified Timing constants calculated Progress patterns documented Integrated into components (next step) Tested in preview (next step)

Animation Patterns

Pattern 1: Entrance Animation

Spring-based entrance with scale and opacity:

```typescript const entranceProgress = spring({ frame, fps, config: { damping: 200 }, });

const scale = interpolate(entranceProgress, [0, 1], [0.8, 1]); const opacity = entranceProgress; const translateY = interpolate(entranceProgress, [0, 1], [20, 0]);

Pattern 2: Staggered Reveal

Multiple items animating with delay:

const items = ['Item 1', 'Item 2', 'Item 3']; const STAGGER_DELAY = 5;

items.map((item, index) => { const itemProgress = spring({ frame: frame - (index * STAGGER_DELAY), fps, config: SPRING_CONFIGS.snappy, });

return (

); });

Pattern 3: Transition Between States

Smooth transition using frame ranges:

const transitionProgress = interpolate( frame, [startFrame, endFrame], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } );

// State A → State B const value = interpolate( transitionProgress, [0, 1], [stateAValue, stateBValue] );

Pattern 4: Looping Animation

Continuous cycling animation:

const LOOP_DURATION = 60; // frames const loopProgress = (frame % LOOP_DURATION) / LOOP_DURATION;

const rotation = loopProgress * 360; // 0 to 360 degrees const pulse = Math.sin(loopProgress * Math.PI * 2) * 0.1 + 1; // 0.9 to 1.1

Pattern 5: Overshoot and Settle

Spring with intentional overshoot:

const overshootProgress = spring({ frame, fps, config: { damping: 10, // Low damping = more bounce stiffness: 100, }, });

const scale = interpolate(overshootProgress, [0, 1], [0, 1.2]); // Overshoots to 1.2

Spring Configuration Guide Damping Parameter

Controls how quickly oscillation stops:

// High damping (200+) - Smooth, minimal/no bounce damping: 200 // → Smooth entrance, elegant

// Medium damping (20-80) - Visible bounce, quick settle damping: 40 // → Snappy, responsive

// Low damping (8-15) - Strong bounce, playful damping: 10 // → Bouncy, fun

// Very low damping (2-5) - Extreme bounce damping: 5 // → Jello-like

Stiffness Parameter

Controls animation speed:

// High stiffness (200+) - Fast animation stiffness: 300 // → Quick, snappy

// Medium stiffness (80-150) - Standard speed stiffness: 100 // → Balanced

// Low stiffness (30-60) - Slow animation stiffness: 50 // → Gentle, relaxed

Mass Parameter

Controls inertia and weight:

// Light mass (0.5) - Responsive, quick mass: 0.5 // → Featherlight

// Standard mass (1) - Balanced mass: 1 // → Normal weight

// Heavy mass (2+) - Sluggish, weighty mass: 2 // → Heavy, substantial

Easing Function Reference

Standard easing curves:

// Linear - Constant speed easeLinear: (t) => t

// Ease Out - Fast start, slow end (most common) easeOut: (t) => t * (2 - t)

// Ease In - Slow start, fast end easeIn: (t) => t * t

// Ease In-Out - Slow start and end, fast middle easeInOut: (t) => t < 0.5 ? 2tt : -1+(4-2t)t

// Ease Out Cubic - Smooth deceleration easeOutCubic: (t) => (--t)tt + 1

// Ease In Cubic - Smooth acceleration easeInCubic: (t) => ttt

Frame Calculation Helpers

Common frame calculations:

// Convert seconds to frames const secondsToFrames = (seconds: number, fps: number) => seconds * fps;

// Calculate stagger frame offset const staggerFrame = (index: number, delay: number, startFrame: number = 0) => startFrame + (index * delay);

// Calculate animation end frame const endFrame = (startFrame: number, durationFrames: number) => startFrame + durationFrames;

// Check if animation is active const isActive = (frame: number, start: number, end: number) => frame >= start && frame <= end;

// Get progress within range const rangeProgress = (frame: number, start: number, end: number) => Math.max(0, Math.min(1, (frame - start) / (end - start)));

Integration Workflow Generate animation config using this skill → ANIMATION_CONFIG.md Add to constants.ts in composition folder Reference in components during implementation Test in preview and adjust parameters Document any changes back to config Common Animation Combinations Logo Entrance (Smooth + Scale + Fade) config: { damping: 200 } scale: [0.8, 1] opacity: [0, 1] translateY: [20, 0]

Text Reveal (Stagger + Slide + Fade) config: { damping: 20, stiffness: 200 } staggerDelay: 5 frames translateX: [-30, 0] opacity: [0, 1]

Button Pulse (Loop + Scale) loopDuration: 60 frames scale: [1, 1.05, 1] easing: easeInOut

Page Transition (Fade + Slide) duration: 15 frames opacity: [1, 0] (out), [0, 1] (in) translateX: [0, -100] (out), [100, 0] (in)

Timing Best Practices

Recommended timing ranges for different animation types:

// Micro-interactions button hover: 5-10 frames tooltip appear: 8-12 frames

// Standard animations fade in/out: 10-20 frames slide in/out: 15-25 frames scale entrance: 20-30 frames

// Stagger delays individual items: 3-8 frames word-by-word: 4-6 frames large groups: 2-4 frames

// Hold durations text on screen: 60-120 frames (2-4 seconds) quick message: 30-60 frames (1-2 seconds)

Integration with Other Skills

This skill feeds into:

remotion-animation (this skill) ↓ outputs: ANIMATION_CONFIG.md remotion-component-gen ↓ applies animation configs in components remotion-composition ↓ coordinates timing across scenes

Works with:

/motion-designer — Animation specs from design documents /remotion-scaffold — Configs go into constants.ts /remotion-component-gen — Components apply these configs /remotion-composition — Timing coordinates with Sequence layout /remotion-spec-translator — Orchestrates this skill when translating specs

This skill provides precise animation parameter definitions that ensure consistent, production-quality motion across Remotion video projects.