Motion: [BUG] `useViewportScroll` is not updating.

[saisandeepvaddi]

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.

[mattgperry]

Do you have body/html set to height: 100%?

On Mon, 2 Nov 2020 at 18:27, Sai Sandeep Vaddi [e-mail]
wrote:

1. Read the FAQs <#m_-5060704571884303153_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.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/framer/motion/issues/835, or unsubscribe
https://github.com/notifications/unsubscribe-auth/AB34WKXGECQHGNZJZCOBV3DSN3TWPANCNFSM4THX4OAQ
.

[saisandeepvaddi]

Nope.

This is the whole css

body {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  height: 800px;
}

.box {
  margin: 10;
}

[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.

[paales]

useViewportScroll is a MotionValue<number> To fix your example, you should use useMotionTemplate

Example:
https://codesandbox.io/s/musing-carson-vyt4i?file=/src/App.js:874-882

[saisandeepvaddi]

@camsloanftc In your example, in the console.log, progress doesn't seem to be going to 100% even when scrolled to the bottom right?

[saisandeepvaddi]

@paales Your example seems to be updating the values, but, the code in my initial example is just the same as the one in the docs right?

Docs say

export const MyComponent = () => {
  const { scrollYProgress } = useViewportScroll()
  return <motion.div style={{ scaleX: scrollYProgress }} />
}

Regardless of the usage of useEffect in my example, using scaleX with scrollYProgress must be doing something based on the docs. I may be missing something.

[FernandoJMedina]

Delete 800px height on css grid class.
You must give your motion.div a width of '100%' or apply right: 0.
Then you have to use useTransform hook to interpolate the scrollYprogress motionvalue.

const scaleX = useTransform(scrollYProgress, [0, 1], [1, 0]);

Then apply the variable to de scaleX css property at your motion.div

https://codesandbox.io/s/broken-sunset-ndu4x?file=/src/App.js