6

I have a fairly simple fade-in scenario, where I want to control the duration of the animation. But cannot wrap around my head around how to accomplish this.

Code excerpt:

function BoxA() {
  return (
    <Spring from={{ opacity: 0.2 }} to={{ opacity: 1 }}>
      {props => (
        <div
          style={{
            height: 100,
            width: 100,
            backgroundColor: "pink",
            color: "#fff",
            ...props
          }}
        >
          1
        </div>
      )}
    </Spring>
  );
}

Complete code example: https://codesandbox.io/s/n7pw660264

Fellow Stranger
  • 32,129
  • 35
  • 168
  • 232

2 Answers2

8

You have to set the config property for the duration.

<Spring config={{duration: 5000}} from={{ opacity: 0.2 }} to={{ opacity: 1 }}>
Peter Ambruzs
  • 7,763
  • 3
  • 30
  • 36
  • This is correct, duration switches to a linear animation, in this case 5 seconds. Time based often isn't the best choice, though, see: http://react-spring.surge.sh/gotchas – hpalu Jan 07 '19 at 15:37
  • Yes, it is linear by default, but you can change the easing in config as well. And I never used either of them. Most of the time spring animation just works out of the box. – Peter Ambruzs Jan 07 '19 at 15:58
-1

You can use delay property to control the animation,

According to documentation

Delay in ms before the animation starts (config.delay takes precedence if present) */

like this

<Spring from={{ opacity: 0.2 }} delay={1000} to={{ opacity: 1 }}></Spring>

Demo

Source

Just code
  • 13,553
  • 10
  • 51
  • 93
  • Hm, it looks like it's only waiting (delaying) 1000 ms with the animation. I was looking for defining a time unit during which the animation would gradually take effect. – Fellow Stranger Jan 07 '19 at 13:00
  • @FellowStranger as far as I know there is no property to support it. – Just code Jan 07 '19 at 13:05