[BUG] useScroll Hook Not Recalculating on window.scrollBy

[ciruz]

1. Read the FAQs 👇

2. Describe the bug

The useScroll hook in Framer Motion does not seem to recalculate values for scale and opacity when the scroll position changes programmatically using window.scrollBy. This issue occurs when items in a list are filtered, causing them to change their position in the DOM. The opacity and scale effects do not update correctly until a manual scroll action is performed.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/github/ciruz/framer-motion-usescroll/main

4. Steps to reproduce

1. Set up a list of items using the useScroll hook to adjust opacity and scale based on scroll position.
2. Implement filtering functionality that reorders or filters items in the list.
3. Use window.scrollBy to attempt to trigger a recalculation of useScroll's values after the filtering operation.

Steps to reproduce the behavior:

1. Go to https://framer-motion-usescroll.vercel.app/
2. Click on a Filter (ex. green)
3. See error

5. Expected behavior

The useScroll hook should recalculate the values for scale and opacity when the scroll position changes programmatically, ensuring smooth transitions based on the new item positions.

The scale and opacity values do not update until the user manually scrolls the page. Using window.scrollBy or window.scrollTo does not trigger a recalculation, causing items to have incorrect opacity and scale until a manual scroll occurs.

6. Video or screenshots

https://github.com/user-attachments/assets/2074d1ee-cdf8-4fe9-8466-5c8e9b9a0bfd

With filter, elements move up in DOM, for useScroll they are still out of Viewport, even if you trigger like a programmatically scroll as a "fix".

If applicable, add a video or screenshots to help explain the bug.

7. Environment details

Next.js and Framer Motion