Animation utilities for creating smooth transitions and physics-based motion.
interpolate()
Maps an input value within a range to an output value.
const value = interpolate(input, inputRange, outputRange, options);
Array of input values (must be strictly monotonically increasing, at least 2 elements)
Array of output values (must match length of inputRange)
Configuration options
Behavior when input is less than inputRange[0]
extend: Continue the trendclamp: Return outputRange[0]identity: Return input
Behavior when input is greater than inputRange[last]
extend: Continue the trendclamp: Return outputRange[last]identity: Return input
Easing function to apply to the interpolation
The interpolated output value
Example
import { interpolate, Easing } from '@heliosvideo/core';
// Linear interpolation
const opacity = interpolate(
frame,
[0, 30],
[0, 1]
);
// With easing
const scale = interpolate(
frame,
[0, 60],
[0.5, 1.5],
{ easing: Easing.cubic.out }
);
// Multi-segment animation
const y = interpolate(
frame,
[0, 30, 60, 90],
[0, 100, 100, 200]
);
// Clamping
const clamped = interpolate(
frame,
[0, 100],
[0, 1],
{
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp'
}
);
spring()
Calculates the value of a spring physics simulation at a specific frame.
const value = spring(options);
Spring configuration
Frame rate in frames per second
Physics configuration
Mass of the spring (must be > 0)
Stiffness of the spring (must be > 0)
Prevent the spring from overshooting the target value
Duration hint (currently ignored by spring function)
The calculated spring value at the given frame
Example
import { spring } from '@heliosvideo/core';
// Basic spring animation
const scale = spring({
frame: currentFrame,
fps: 30,
from: 0,
to: 1,
});
// Bouncy spring
const y = spring({
frame: currentFrame,
fps: 30,
from: 0,
to: 100,
config: {
mass: 1,
stiffness: 200,
damping: 5,
},
});
// Stiff spring with no overshoot
const opacity = spring({
frame: currentFrame,
fps: 30,
from: 0,
to: 1,
config: {
stiffness: 300,
damping: 30,
overshootClamping: true,
},
});
calculateSpringDuration()
Calculates the number of frames required for a spring to settle.
const duration = calculateSpringDuration(options, threshold);
options
Omit<SpringOptions, 'frame'>
required
Spring configuration (same as spring() but without frame)
Distance from target to consider settled
Estimated duration in frames
Example
import { calculateSpringDuration } from '@heliosvideo/core';
const duration = calculateSpringDuration({
fps: 30,
from: 0,
to: 1,
config: {
stiffness: 100,
damping: 10,
},
});
console.log(`Spring will settle in ${duration} frames`);
DEFAULT_SPRING_CONFIG
Default spring configuration values.
const DEFAULT_SPRING_CONFIG: Required<SpringConfig> = {
mass: 1,
stiffness: 100,
damping: 10,
overshootClamping: false,
};