pmndrs / pmndrs/react-spring

[bug]: On onRest Callback, not really arrives stand-still

Open
#2,030 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: core kind: bug
Dominant language
TypeScript
Stars
29.1k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Which react-spring target are you using?
  • @react-spring/web
  • @react-spring/three
  • @react-spring/native
  • @react-spring/konva
  • @react-spring/zdog
What version of react-spring are you using?

9.5.5

What's Wrong?

when on onRest callback, I expect "top" value to 100, but it is not.

const props = useSpring({
    from: { top: 0 },
    to: { top: 100 },
    onRest: () => {
      console.log(ref.current?.style.top); // Wrong: it is not 100, about like 99.7959px
      window.requestAnimationFrame(() => {
        console.log(ref.current?.style.top); // Right: it is 100
      });
    }
});
To Reproduce

See Codesandbox.

Expected Behaviour

See Codesandbox.

Link to repo

https://codesandbox.io/s/react-spring-onrest-xfsq1j?file=/src/App.js:240-246

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/App.js in the linked CodeSandbox and reproduce the @react-spring/web example using useSpring and onRest. Compare ref.current.style.top inside onRest with its value in the next requestAnimationFrame, then trace the relevant callback and style-update path. Done means the callback behavior matches the expected value and the regression is covered by a test.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.