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
|
clamp | (optional) to clamp the value in a min max range
|
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.. |