spring-animation

When to use

Use this skill when creating Remotion video compositions that need spring physics -- natural, organic motion with bounce, overshoot, and elastic settling.

Use spring when you need:

• Bouncy/elastic entrances (overshoot + settle)
• Organic deceleration (not linear, not eased -- physically modeled)
• Staggered trails with spring physics per element
• Number counters that overshoot then settle
• Scale/rotate with natural weight and inertia
• Enter + exit animations with spring math (in - out)
• Multi-property orchestration with different spring configs per property

Use Remotion native interpolate() when:

• Linear or eased motion with no bounce (fade, slide, wipe)
• Exact timing control (must end at precisely frame N)
• Clip-path animations
• Progress bars / deterministic counters

Use GSAP (gsap-animation skill) when:

• Text splitting (SplitText: chars/words/lines with mask)
• SVG stroke drawing (DrawSVG)
• SVG morphing (MorphSVG)
• Complex timeline orchestration with labels and position parameters
• ScrambleText decode effects
• Registered reusable effects

Note: @react-spring/web is NOT compatible with Remotion (it uses requestAnimationFrame internally). This skill uses Remotion's native spring() function which provides the same physics model in a frame-deterministic way.

---

Core API

spring()

Returns a value from 0 to 1 (can overshoot past 1 with low damping) based on spring physics simulation.

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

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const value = spring({
  frame,
  fps,
  config: {
    damping: 10,     // 1-200: higher = less bounce
    stiffness: 100,  // 1-200: higher = faster snap
    mass: 1,         // 0.1-5: higher = more inertia
  },
});

Config Parameters

Parameter	Range	Default	Effect
damping	1-200	10	Resistance. Low = bouncy, high = smooth
stiffness	1-200	100	Snap speed. High = fast, low = slow
mass	0.1-5	1	Weight/inertia. High = sluggish, low = light
overshootClamping	bool	false	Clamp at target (no overshoot)