React-Spring - Change Transition Animation Speed

Question

I'm trying to change the speed of the default fade-in and fade-out transition, but the documentation does not seem to mention how to do so:

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

Given this code, how would I make the fade in / out animation faster or slower?

I tried doing this (below), but it ended up breaking down the transition entirely. The animation no longer worked:

from={{ opacity: 1, transitionDelay: "5000ms" }}
enter={{ opacity: 1, transitionDelay: "5000ms" }}
leave={{ opacity: 0, transitionDelay: "5000ms" }}

Any ideas?

Answer 1

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.

Answer 2

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>