Mathematics & Animation Reading Time: 10 Mins

Spring Physics & Interpolation Math: Engineering 60 FPS Visual Easing in Pure Code

Standard CSS bezier transitions (`cubic-bezier(0.25, 0.1, 0.25, 1)`) feel artificial when applied to high-energy video elements. Organic motion requires solving the physical differential equations of a damped harmonic oscillator. This guide breaks down the physical properties of spring animations inside programmatic video architectures.

1. The Harmonic Oscillator Equation

Natural motion simulation models an object of mass $m$ attached to an ideal spring with stiffness constant $k$, operating against a friction medium with damping coefficient $c$. The governing second-order differential equation is:

m \frac{d^2x}{dt^2} + c \frac{dx}{dt} + kx = 0

Depending on the ratio between damping and critical damping ($c_c = 2\sqrt{km}$), three dynamic states emerge:

Overdamped ($c > c_c$): Smooth return with zero oscillation. Feels sluggish and unresponsive in short-form reels.
Critically Damped ($c = c_c$): Returns to equilibrium in the fastest possible duration without overshoot. Perfect for crisp UI modals and menus.
Underdamped ($c < c_c$): Bounces across target equilibrium before resting. This overshoot gives motion graphics that snappy, punchy tactile feedback.

2. Tuning Parameters in Remotion: Stiffness vs. Damping

In code-based video frameworks, spring physics is evaluated deterministically at every discrete frame using mass, damping, and stiffness arguments:


                const popScale = spring({

                  frame: currentFrame,

                  fps: 60,

                  config: {

                    mass: 0.8,       // Lower mass = faster acceleration

                    damping: 12,     // Friction: Prevents endless bouncing

                    stiffness: 140   // Tension: Snappiness of the spring

                  }

                });

3. Multi-Axis Interpolation Mapping

Spring coefficients naturally range from $0.0$ to $1.0$ (with potential overshoot exceeding $1.0$). By feeding this normalized value into multi-attribute interpolation functions, a single mathematical calculation can govern translate, scale, and rotate simultaneously:


                // Single spring driving 3D transformation matrix

                const cardY = interpolate(popScale, [0, 1], [300, 0]);

                const cardRot = interpolate(popScale, [0, 1], [-15, 0]);

                const cardOpacity = interpolate(popScale, [0, 0.4], [0, 1], { extrapolateRight: 'clamp' });


                const cardTransform = `translateY(${cardY}px) rotate(${cardRot}deg) scale(${popScale})`;

4. Best Practices for 60 FPS Mobile Renders

Because headless video renderers evaluate frames mathematically during export, continuous springs are computationally deterministic. Unlike browser-side DOM animations subject to garbage collection pauses or thread throttling, Remotion guarantees mathematically identical motion curves on every render pass.