How to add reactSpring on useEffect instead of onMouseOver event?

Question

i have an animation on the onMouseOver with React-spring. But i want the animation on the pageload (useEffect). Has anyone an idea how to fix that.

export function Hero({ image, text, button }) {
  const heroRef = React.useRef(null)
  const [transitionArrow, setTransitionArrow] = React.useState(false)
  const animatedButton = useSpring({
    transform: transitionArrow ? 'translate3d(0, 5px, 0)' : 'translate3d(0, 0px, 0)',
    config: config.wobbly
  })
  return (
    <div ref={heroRef} className={styles.component}>
      <ContainerLg>
        <div className={styles.content}>
          <div className={styles.text}>
            <h3>{text}</h3>
          </div>
          { button && (<ButtonWhite>{button}</ButtonWhite>)}
        </div>
      </ContainerLg>
      { button &&
        <animated.div
          onMouseOver={(() => setTransitionArrow(true))}
          onMouseLeave={(() => setTransitionArrow(false))}
          style={animatedButton}
          onClick={handleClick}
          className={styles.arrow}
          dangerouslySetInnerHTML={{ __html:scrollArow }} /> }
      <div className={styles.image}>{image}</div>
    </div>
  )

  function handleClick() {
    window.scrollTo({ top: heroRef.current.offsetTop + heroRef.current.offsetHeight, behavior: 'smooth' })
  }
}

Answer 1

It seems quite simple to me. You have to use useEffect with empty dependency. This way it will run only once.

useEffect(() => {
   setTransitionArrow(true);
},[])