[BUG] scrollYProgress callback not rerun when content height is changed

[sergiupop]

1. Read the FAQs 👇
Read it, I don't have any of those issues.

2. Describe the bug
scrollYProgress callback is not reexecuted when the height of the content is changed. Because the height of the content is changed, th scroll position is also updated so I would expect I the scrollYProgress is reexecuted and log the new scroll value.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/s/framer-motion-usescroll-forked-v8zyv5?file=/src/App.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/framer-motion-usescroll-forked-v8zyv5?file=/src/App.tsx. You should see 10 buttons labeled from 0 to 9.
2. Scroll down to the last button (label 9) so that the scroll is at the bottom of the container. While scrolling, the console should output the scroll y progress value.
3. Click on that last button. Upon clicking, it's height should be changed/increased and because of this, the whole content height is increased and thus the scrollbar position is also updated - it is not at the bottom of the container anymore. Because there is a new scroll y position, I would expect the scrollYProgress callback to log the new value automatically.
4. scrollYProgress callback is not executed

5. Expected behavior
Log the new scroll y progress value when clicking the last button in the list.

6. Video or screenshots

7. Environment details
framer-motion 10.16.1 used in code sandbox

FAQs

Framer Motion won't install

Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6.

height: "auto" is jumping

Animating to/from auto requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.

The recommended solution is to move padding to a child element. See this issue for the full discussion.

Type error with AnimateSharedLayout

AnimateSharedLayout was deprecated in 5.0. Refer to the upgrade guide for instructions on how to remove.

Preact isn't working

Framer Motion isn't compatible with Preact.

AnimatePresence isn't working

Have all of its immediate children got a unique key prop that remains the same for that component every render?

// Bad: The index could be given to a different component if the order of items changes
<AnimatePresence>
  {items.map((item, index) => <Component key={index} />)}
</AnimatePresence>

// Good: The item ID is unique to each component
<AnimatePresence>
  {items.map((item, index) => <Component key={item.id} />)}
</AnimatePresence>

Is the AnimatePresence correctly outside of the controlling conditional? AnimatePresence must be rendered whenever you expect an exit animation to run - it can't do so if it's unmounted!

// Bad: AnimatePresence is unmounted - exit animations won't run
{isVisible && (
  <AnimatePresence>
    <Component />
  </AnimatePresence>
)}

// Good: Only the children are unmounted - exit animations will run
<AnimatePresence>
  {isVisible && <Component />}
</AnimatePresence>