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

Property	Description
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, }