React-Spring - Change Transition Animation Speed

React-spring uses a physical model. So you can either set the physical attributes of the model or you can specify a duration as mentioned before. If you set the duration, then it switches to a time based model. But we like react-spring because of its physical model.

I recommend tweaking the physical attributes. You can play with the basic attributes here: https://www.react-spring.io/docs/hooks/api

They are mass, tension, friction. If you decrease mass and friction and increase tension, then the speed will increase as well. You can also set an initial velocity, with a positive velocity you can also increase the speed. With higher speed there will be more likely an overshoot, when the animation will be wobbly. You can stop the overshoot with the clamp config parameter. It will stop the animation when its reached its endpoint.

The following config is quite quick

<Transition
  items={show}
  config={mass:1, tension:500, friction:18}
  from={{ opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}>
  {show => show && (props => <div style={props}>✌️</div>)}
</Transition>

If you want more quicker you can decrease the friction and you might want to stop the overshoot. For example:

config={mass:1, tension:500, friction:0, clamp: true}

It is a trial error process to experiment with the config values. I recommend to store the config you like in a constant and you can reuse it in more animation.

You have to add config prop to Transition and pass duration in it:

<Transition
  config={{ duration: 5000 }}
  items={show}
  from={{ opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}>
  {show => show && (props => <div style={props}>✌️</div>)}
</Transition>