You're attempting to perform an animation, but receiving this error message.
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:
You're trying to animate an element returned from
document.querySelector
ordocument.getElementById
, but they haven't found matching elements.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.
To fix this, you need to first check that element
actually exists before trying to animate it.
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:
Additionally, if passing a ref
to a non-HTML component:
You must ensure that Component
correctly forwards ref
to an underlying HTML or SVG component.