Skip to main content
Version: 1.0.161

Timing

lets you create an animation based on duration.

Timing animation

Loading...

The core animation object will look like

    {
type: 'timing',
config: {
duration: 300, // optional. duration in which animation should happen in ms.
},
delay: 3000, // optional. delay in animation if any. default is 0ms
clamp: {min: 0, max: 40}, // optional. to run animation in a predefined range
repeat: {numberOfReps: 5, reverse: true}, //optional, to repeat the animation

componentProps: {
style: {
fontSize:40
// ... component styles to be animated
},
// ... component props to be animated
},
},

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

PropertyDescription
config
  {
duration: 300, // optional. duration in which animation should happen in ms.
}
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,
}