Skip to main content

measureSpring()v2.0.8

Based on a spring() configuration and the frame rate, return how long it takes for a spring animation to settle.

import {measureSpring, SpringConfig} from 'remotion';

const config: Partial<SpringConfig> = {
  damping: 200,
};

measureSpring({
  fps: 30,
  config: {
    damping: 200,
  },
}); // => 23
info

Theoretically, a spring animation never ends. There is always a miniscule amount or energy left in the spring that causes tiny movements. Instead, we set a threshold to define when the spring animation is considered done.

Arguments​

An object with these keys:

fps​

The frame rate on which the spring animation is based on.

threshold?​

Defines when the animation should be considered finished. Default: 0.005. 0.01 means that the animation is finished when it always stays within 1% of the to value. For example an animation that goes from 0 to 1 is considered finished when the value never leaves the range [0.99, 1.01] after the end point.

Lower values mean the spring duration is longer, higher values result in the spring duration being shorter.

config?​

The spring configuration that you pass to spring().

from?​

Deprecated

Will be removed in Remotion 5.0 because this param does not influence the duration calculation.

The initial value of the animation. Default: 0.

to?​

Deprecated

Will be removed in Remotion 5.0 because this param does not influence the duration calculation.

The end value of the animation. Default: 1. Note that depending on the parameters, spring animations may overshoot the target a bit, before they bounce back to their final target.

Compatibility​

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

See also​