Documentation

Documentation

Error

useScroll ref is not hydrated

useScroll ref is not hydrated

You've received the following message:

Container/Target ref is defined but not hydrated

useScroll ref is not hydrated

You're attempting to use useScroll with target or container options and you've received this error.

const ref = useRef(null)

useScroll({ container: ref })

Explanation

You're attempting either to track an element target as it moves through the viewport. Or tracking the scroll progress of a scrollable element container other than the viewport.

For this, Motion needs a reference to that element.

Solution

The ref is not correctly being passed to an element. Ensure that it is:

<div ref={ref} />

It could be that you're passing this ref to another non-elemental component like this:

<Component ref={ref} />

Ensure that the Component is correctly forwarding this ref prop to a HTML or SVG element.

Level up your animations with Motion+

Access to 100+ premium examples, exclusive APIs like Cursor, private Discord and GitHub, and powerful VS Code animation editing tools.

One-time payment, lifetime updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.