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
Property | Description |
---|---|
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
|
clamp | (optional) to clamp the value in a min max range
|
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
Property | Default | Description |
---|---|---|
mass | 1 | (optional) The weight of the spring. Reducing this value makes the animation faster. |
damping | 10 | (optional) How quickly a spring slows down. Higher damping means the spring will come to rest faster. |
For duration based
Property | Default | Description |
---|---|---|
duration | 2000 | (optional) Length of the animation (in milliseconds). |
dampingRatio | 0.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.
Property | Default | Description |
---|---|---|
velocity | 0 | (optional) Initial velocity applied to the spring equation. |
Stiffness | 100 | (optional) How bouncy the spring is. |
overshootClamping | false | (optional) Whether a spring can bounce over the final value. |
restDisplacementThreshold | 0.01 | (optional)The displacement below which the spring will snap to final value without further oscillations. |
restSpeedThreshold | 2 | (optional)The speed in pixels per second from which the spring will snap to final value without further oscillations. |