0

I am currently moving our animations over to react-spring but am having difficulty implementing animations such as fade-in top left to bottom right. Something simple along these lines fades in a div but I need to control the direction of the fade in:

import {useTransition, animated} from 'react-spring'

const component = () => {

  const props = useSpring({opacity: 1, from: {opacity: 0}})

  return (
    <animated.div>
      {div contents here}
    </animated.div>
  )
}

Anyone have experience with React Spring
AlexanderKaran
  • 515
  • 6
  • 18

1 Answers1

1

To control the direction you can use the css transform property.

  const props = useSpring({
    opacity: 1,
    transform: "translate(0px, 0px)",
    from: { opacity: 0, transform: "translate(-20px, -20px)" }
  });

https://codesandbox.io/s/optimistic-fermi-yclcn

Peter Ambruzs
  • 7,763
  • 3
  • 30
  • 36
  • This does work however it means the div is moving. I don't want it to move I want it to fade in from the top left to bottom left but stay where it is, almost like a gradient fade in. Let me know if I am not explaining myself correctly. – AlexanderKaran Feb 26 '20 at 01:07
  • Can you show an example? I always use movement and everybody else uses it. I'm not aware of this gradient like fade... – Peter Ambruzs Feb 26 '20 at 05:45
  • Fade in an object from one side to another. So the left side starts fading in and the fade-in move across the element so as the right side starts fading-in while the left side will have already finished. I want to achieve this but from corner to corner – AlexanderKaran Feb 26 '20 at 10:32