CODEWITHSUNDEEP
reactjsreact-spring
Fellow Stranger
Fellow Stranger

Reputation: 34023

Animation duration in React Spring

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

Upvotes: 7

Views: 19455

Answers (2)

Peter Ambruzs
Peter Ambruzs

Reputation: 8213

You have to set the config property for the duration.

<Spring config={{duration: 5000}} from={{ opacity: 0.2 }} to={{ opacity: 1 }}>

Upvotes: 11

Just code
Just code

Reputation: 13801

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

Upvotes: -2

Related Questions