Perform animation on null

You're trying to perform an animation on null. Ensure that selectors are correctly finding elements and refs are correctly hydrated.

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.