Skip to main content
Version: 3.x

withSpring

withSpring lets you create spring-based animations.

Loading...

Reference

import { withSpring } from 'react-native-reanimated';

function App() {
sv.value = withSpring(0);
// ...
}

Type definitions

type AnimatableValue = number | string | number[];

interface WithSpringConfig {
damping?: number;
mass?: number;
stiffness?: number;
overshootClamping?: boolean;
restSpeedThreshold?: number;
restDisplacementThreshold?: number;
velocity?: number;
reduceMotion?: ReduceMotion;
clamp?: [number, number];
}

function withSpring<T extends AnimatableValue>(
toValue: T,
config?: WithSpringConfig,
callback?: (finished?: boolean, current?: AnimatableValue) => void
): T;

enum ReduceMotion {
System = 'system',
Always = 'always',
Never = 'never',
}

Arguments

toValue

The value at which the animation will come to rest.

config
Optional

The spring animation configuration.

Loading...

Available for physics-based spring:

NameTypeDefaultDescription
mass
Optional
number1The weight of the spring. Reducing this value makes the animation faster.
damping
Optional
number10How quickly a spring slows down. Higher damping means the spring will come to rest faster.

Available for duration-based spring:

NameTypeDefaultDescription
duration
Optional
number2000Length of the animation (in milliseconds).
Available in Reanimated ≥ 3.2.x
dampingRatio
Optional
number0.5How damped the spring is. Value 1 means the spring is critically damped, and value >1 means the spring is overdamped.
Available in Reanimated ≥ 3.2.x
info

The mass and damping (physics-based) properties can't be used at the same time as duration and dampingRatio (duration-based).

When used together duration and dampingRatio overrides mass and damping props.

Available for every spring animation:

NameTypeDefaultDescription
stiffness
Optional
number100How bouncy the spring is.
velocity
Optional
number0Initial velocity applied to the spring equation.
overshootClamping
Optional
booleanfalseWhether a spring can bounce over the toValue.
restDisplacementThreshold
Optional
number0.01The displacement below which the spring will snap to toValue without further oscillations.
restSpeedThreshold
Optional
number2The speed in pixels per second from which the spring will snap to toValue without further oscillations.
reduceMotion
Optional
ReduceMotionReduceMotion.SystemA parameter that determines how the animation responds to the device's reduced motion accessibility setting.
Available in Reanimated ≥ 3.5.x
clamp
Optional
[number, number]undefinedLimit of the scope of movement. If your spring would exceed this limit, then dampingRatio will be reduced (to make the spring less bouncy)
Available in Reanimated ≥ 3.6.x

callback
Optional

A function called upon animation completion. If the animation is cancelled, the callback will receive false as the argument; otherwise, it will receive true.

Returns

withSpring returns an animation object which holds the current state of the animation. It can be either assigned directly to a shared value or can be used as a value for a style object returned from useAnimatedStyle.

Example

Loading...

Remarks

Platform compatibility

AndroidiOSWeb