[BUG] `useViewportScroll` is not updating.

1. Read the FAQs 👇

2. Describe the bug

Give a clear and concise description of what the bug is. scrollYProgress from useViewportScroll hook does not update.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

A CodeSandbox minimal reproduction will allow us to quickly follow the reproduction steps. Without one, this bug report won’t be accepted.

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/trusting-jepsen-mikfs?file=/src/App.js
2. Open console
3. Scroll down
4. No updated scrollYProgress value

5. Expected behavior

scrollYProgress updates when scroll happens.

[ikupenov]

I ran into this couple of days ago and the issue stems from the fact that I had set the height to 100vh/100%. Try running the following snippet in your browser: document.body.clientHeight - window.innerHeight <= 0. If it returns true you’re probably running into the same issue and will need to use min-height rather than a fixed height for the body element.

[camsloanftc]

The scroll progress happens outside of the react render loop (I believe it is for performance reasons), so you actually need something like this:

  useEffect(() => {
    return scrollYProgress.onChange((v) => console.log(v));
  }, [scrollYProgress]);

I tweaked your demo code example.

I might be misunderstanding the issue though.

From the docs:

MotionValues are used to track the state and velocity of animating values, outside of React’s render lifecycle.