React Spring Animation

Code

const AnimatedBox = () => {
  const [flip, setFlip] = useState(false)
  const { x } = useSpring({
    x: flip ? 1 : 0,
    config: { tension: 280, friction: 60 }
  })
  
  return (
    <animated.div
      onClick={() => setFlip(!flip)}
      style={{
        transform: x.to(val => 
          `scale(${1 + val * 0.5}) rotate(${val * 180}deg)`
        )
      }}
    />
  )
}