onRest gets called before onScroll callback gets fired.

[DamianPereira]

🐛 Bug Report

When using onRest together with changing scroll position, the onRest callback gets called before all events fired are handled. I'm not sure if this is a bug or intended behavior.

To Reproduce

export default function App() {
  const divRef = useRef(null);
  const [animating, setAnimating] = useState(false);
  const _ = useSpring(() => ({
    from: { page: 0 },
    to: { page: 1 },
    onStart: () => {
      setAnimating(true);
    },
    onChange: (_this, ctrl) => {
      divRef.current.scrollTop = ctrl.get().page * divRef.current.clientHeight;
    },
    onRest: () => {
      setAnimating(false);
      console.log("animation finished");
    }
  }));

  const handleScroll = () => {
    if (animating) {
      console.log("scroll because of animation");
    } else {
      console.log("user has scrolled");
    }
  };

  return (
    <div ref={divRef} className="container" onScroll={handleScroll}>
      {[...Array(20)].map((_, i) => (
        <h1 key={i}>{i}</h1>
      ))}
    </div>
  );
}

The idea of this code is to animate the scrolling of the div. But to differentiate in the handler if the div was scrolled by the animation, or manually. All scroll events end up on the "animation has scrolled" branch, except the last one, which ends up happening after the onRest callback.

Expected behavior

I need the last onScroll callback to be called before onRest, so I can differentiate if the animation is doing the scrolling or if the user is scrolling. If there is another way of checking this like imperatevely, asking react-spring if the animation is running (like some api.status() method?).

Link to repro (highly encouraged)

Codesandbox link

Environment

• react-spring v9.2.3
• react v17.0.1

[joshuaellis]

You'd probably need to call get on the controller of the spring but then when you have your springs you can use the is method, documented here

But this is a pretty strange way of using springs. I'm going to move this to a discussion.

[DamianPereira]

My usecase is moving pages for a component every few seconds, but stop animating for 30 seconds when the user scrolls manually (otherwise the user will get their content moved while reading). Is there any other simpler way of doing it with react-spring that I'm not seeing?

Anyway the SpringValue seems very useful for my usecase thank you, I will try it out.

[joshuaellis]

If you use the imperative API you can pause your springs – https://react-spring.io/common/imperatives-and-refs#api-methods

[DamianPereira]

I'm scheduling animations with setInterval, to run api.start() every few seconds, with different parameters for the target page. When the user scrolls I do call api.stop(), but I also need to clear the interval.

My main problem is that the handleScroll method gets called when I change the scrollTop value from onChange in react-spring. And I need to ignore those scroll events that happen while animating, so I don't stop the paging interval every time a page advances. The end result is that instead of advancing every 1/2 seconds it advances every 30seconds. My workaround for this was setting an animating state value before animating and unsetting it onRest, so that any scroll during the animation does not pause/clear the interval. But the last scroll event actually happens after onRest, which causes problems.

Should I be using useSprings and create 1 animation per page advance instead?

[DamianPereira]

I have just tried using a controller, and using the .idle property accessor, it has the same problem, the last scroll handle gets called after the animation ends.