You're attempting to perform an animation, but receiving this error message.

const [scope, animate] = useAnimate()

useEffect(() => {
  const animation = animate(scope.current, { opacity: 1 })

  return () => animation.stop()
})

Explanation

This error message means animate has been passed a null value, which you probably weren't expecting.

There are two broad sources of this error:

1. You're trying to animate an element returned from document.querySelector or document.getElementById, but they haven't found matching elements.

2. You're trying to animate a ref that has not been hydrated.

Solution

The solution depends on the source of the error.

Selectors

If you're using a selector function like document.querySelector or document.getElementById, these return null when no elements are found.

const element = document.querySelector("#doesnt-exist") // null

To fix this, you need to first check that element actually exists before trying to animate it.

if (element) {
  animate(element, { opacity: 1 })
}

Refs

If trying to animate a ref in React or Vue, then it's likely you haven't passed the ref to the HTML element you're intending to animate. Ensure that this has been passed correctly:

const ref = useRef(null)

useEffect(() => {
  animate(ref.current)
})

return <div ref={ref} />

Additionally, if passing a ref to a non-HTML component:

<Component ref={ref} />

You must ensure that Component correctly forwards ref to an underlying HTML or SVG component.