[issue] Animation being triggered and scrollYProgress set to 1 at page startup

[steoo]

Hi, I'm trying to debug this issue that's literally driving me crazy – I thought it was a problem with framer-motion so I moved to react-spring (which was the right move anyway) but still can't crack the case.

The issue is visible if you go at this page: https://bug-radio-c2yarmvk3-stefanoimparato-team.vercel.app/schedule

The rounded box that contains the text "title" is showing because of some other element triggering the scroll. At the moment the code is this:

  const [boxStyles, boxApi] = useSpring(() => ({
    y: '-120%',
  }));

  useScroll({
    container: boxRef as React.MutableRefObject<HTMLDivElement> | undefined,
    default: {
      immediate: true,
    },
    onChange: ({ value: { scrollYProgress }, ...args }) => {
      console.log(scrollYProgress, args);
      if (scrollYProgress > 0.1) {
        boxApi.start({ y: '0%' });
      } else {
        boxApi.start({ y: '-120%' });
      }
    },
  });

where for debugging purposes boxRef is being passed as document.body, but to be fair, it doesn't really matter – I've been having this issue with only certain elements and for this page "schedule" I thought it was because the actual container that's going to trigger the animation was changing its height – but the issue stays even when the div is all alone there in the page.

If you check the console you're gonna see that a 1 is logged – kinda like saying that something triggered a change, but the page has just been loaded. For the element that are working as expected, a 0 is logged.

I tried to replicate this here: https://codesandbox.io/p/sandbox/36434l?file=%2Fsrc%2FApp.js%3A55%2C13 but with no success – tried to also apply the same css but it's too many different nested components to be able to replicate the same scenario.

I tried removing hooks, logging every scrolling element, and more.

Nothing.

Using: Vite, react-router

Any idea? Clue? Direction?

[steoo]

Also tried with a clean state and still can reproduce: https://github.com/steoo/debug-animation --> here's the entire code