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 { 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

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.