How to do a simple fade in transition on React Motion?

Question

I have this basically:

<Motion defaultStyle={{opacity: 0}} style={{ opacity: spring(1, { stiffness: 210, damping: 20 }) }}>{style => {
  return <div style={style}>
</Motion>

But the opacity chops and takes a while.

I just want to say "fade in ease-in-out 300ms". Can anything like this be done with react-motion? Or must you use react-transition-group?

Dont know much about react-motion, but react-reveal is all the rage lately. Documentation is simpler too. — Chris Ngo, Aug 04 '19 at 22:09
Thank you that's helpful :) But that's only for scroll animations it sounds like. — Lance, Aug 04 '19 at 22:10

score 0 · Answer 1 · answered May 23 '20 at 17:26

I don't think that can be changed, but the velocity seems can be adjusted from stiffness and damping, https://github.com/chenglou/react-motion/issues/265

You can try a helper to figure out those values, http://chenglou.github.io/react-motion/demos/demo5-spring-parameters-chooser/

The trouble seems to me is the mount /dismount issue, but if you don't care, you could just setmount to be false.

const Fade = ({
  Style, on, mount, children
}) => {
  const [animating, setAnimating] = useState(true)
  const onRest = () => { setAnimating(false) }
  useEffect(() => { setAnimating(true) }, [on])

  if (mount) {
    if (!on && !animating) {
      return null
    }
  }

  return (
    <Style
      on={on}
      onRest={onRest}
    >
      {children}
    </Style>
  )
}

Fade.propTypes = {
  Style: elementType,
  on: bool,
  mount: bool,
}

score 0 · Answer 2 · answered Jul 23 '20 at 07:42

You should not use the given "style" as the style prop You should use it as such:

<Motion defaultStyle={{opacity: 0}} style={{ opacity: spring(1, { stiffness: 210, damping: 20 }) }}>{style => {
  return <div style={{opacity: style.opacity}>
</Motion>

see my example here: fade example with delay using hooks

How to do a simple fade in transition on React Motion?

2 Answers2