Skip to main content
Version: 1.0.161

Spring

To make spring based animations in Nano

Spring animation

Loading...
    {
type: 'spring',
config: {
mass: 5,
damping: 20,
duration:200,
dampingRatio:0.5
},
delay: 3000, // optional. delay in animation if any. default is 0ms
clamp: {min: 0, max: 40}, // optional. to run animation in a predefined range
componentProps: {
style: {
fontSize:40
// ... component styles to be animated
},
// ... component props to be animated
},
},

For spring , we can customise the animation by using following props

PropertyDescription
config(optional) to define the characteristic of animation and it is explained in detail below
delay(optional) the delay in ms after which the animation should start
repeat(optional) how many times the animation should repeat and whether reverse animation can happen
  {
numberOfReps: 5,
reverse: true,
}
clamp(optional) to clamp the value in a min max range
  {
max: 40,
min: 0,
}

Config

config object can have diff properties based on type of spring animation we need. It can be mass based and duration based. lets see both of their properties one by one

For mass based

PropertyDefaultDescription
mass1(optional) The weight of the spring. Reducing this value makes the animation faster.
damping10(optional) How quickly a spring slows down. Higher damping means the spring will come to rest faster.

For duration based

PropertyDefaultDescription
duration2000(optional) Length of the animation (in milliseconds).
dampingRatio0.5(optional) How damped the spring is. Value 1 means the spring is critically damped, and value >1 means the spring is overdamped.

Note: The mass and damping (physics-based) properties can't be used at the same time as duration and dampingRatio (duration-based). You can either use mass and damping or duration and dampingRatio.

Apart from the above properties, we also have some common properties in config object that can be used in both mass based and duration based animation. They are given in table below.

PropertyDefaultDescription
velocity0(optional) Initial velocity applied to the spring equation.
Stiffness100(optional) How bouncy the spring is.
overshootClampingfalse(optional) Whether a spring can bounce over the final value.
restDisplacementThreshold0.01(optional)The displacement below which the spring will snap to final value without further oscillations.
restSpeedThreshold2(optional)The speed in pixels per second from which the spring will snap to final value without further oscillations.