Decay

Decay

lets you create animations that mimic objects in motion with friction.

Decay animation

Loading...

The core animation object will look like

    {
      type: 'decay',
      config: {
        deceleration:0.998,
        velocity:1,
        clamp:[],
        velocityFactor:1,
        rubberBandEffect:false,
        rubberBandFactor:0.6,
      },
      componentProps: {
        style: {
          fontSize:40
          // ... component styles to be animated
        },
        // ... component props to be animated
      },
    },

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 properties are listed below

Property	Default	Description
velocity	0	(optional) Initial velocity applied to the spring equation.
deceleration	0.998	(optional) The rate at which the velocity decreases over time.
clamp	[]	(optional) Array of two numbers which restricts animation's range. Animation stops when either bound is reached unless the rubberBandEffect option is set to true. *Required when rubberBandEffect is set to true.
velocityFactor	1	(optional)Velocity multiplier.
rubberBandEffect	false	(optional)Makes the animation bounce over the limit specified in clamp.
rubberBandFactor	0.6	(optional)Strength of the rubber band effect..