9

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?

HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
Phil
  • 3,342
  • 5
  • 28
  • 50

3 Answers3

10

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.

Phil
  • 3,342
  • 5
  • 28
  • 50
Peter Ambruzs
  • 7,763
  • 3
  • 30
  • 36
  • Thanks! Going with this as the correct answer since React-Spring was created as a "spring-physics based animation library". Duration will also work for people who need a very specific time based approach which I don't – Phil Oct 24 '19 at 16:03
  • @Phillip It would be cool to have a helper that creates those values from a duration and a bouce percentage. – John May 29 '20 at 13:53
4

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>
Andrii Golubenko
  • 4,879
  • 1
  • 22
  • 27
0

You can use this configuration, it is worked for me:

    config: {
        duration: 2000,
    }
Ah Hu
  • 46
  • 7