chenglou / chenglou/react-motion

Is it bug or am I wrong understand precisions?

Open
#384 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
21.9k
Forks
1.1k
PR merge metrics
No merged PRs in 30d

Description

From docs:

> precision: optional, defaults to 0.01. Specifies both the rounding of the interpolated value and the speed (internal).

I am trying to change value from `243` to `164`:

``` js
const springConfig = {stiffness, damping, precision: 1};

const config = {
style: {
width: spring(newWidth, springConfig),
}
};

return (

{ style => {
console.log('val', style.width);

return (
...
)
}}

)
```

I inserted logging into `stepper`:

``` js
console.log(
'(prec)', precision,
'(newV)', Math.abs(newV),
'(newX - destX)', Math.abs(newX - destX)
)

if (Math.abs(newV) < precision && Math.abs(newX - destX) < precision) {
...
```

Result is very strange. First of all I expected interpolated value had to rounded by `1` (pixel) as documented. Second render called even if value changed less then by `1`. Am I wrong in something?

Result log:

``` js
...
val 164.2248249989649
(prec) 1 (newV) 1.9770873732772767 (newX - destX) 0.2147207644284208
(prec) 1 (newV) 1.714049351387009 (newX - destX) 0.18615327523863812
val 164.19488178588549
(prec) 1 (newV) 1.714049351387009 (newX - destX) 0.18615327523863812
(prec) 1 (newV) 1.4860058205786284 (newX - destX) 0.16138651156234118
val 164.168930963114
(prec) 1 (newV) 1.4860058205786284 (newX - destX) 0.16138651156234118
(prec) 1 (newV) 1.2883014313070005 (newX - destX) 0.13991482104054853
val 164.146435773452
(prec) 1 (newV) 1.2883014313070005 (newX - destX) 0.13991482104054853
(prec) 1 (newV) 1.1169000386184096 (newX - destX) 0.12129982039689935
val 164.12692825199144
(prec) 1 (newV) 1.1169000386184096 (newX - destX) 0.12129982039689935
(prec) 1 (newV) 0.9683023754668657 (newX - destX) 0.10516144747245448
val 164.03660828580064
(prec) 1 (newV) 0.9683023754668657 (newX - destX) 0.10516144747245448
(prec) 1 (newV) 0 (newX - destX) 0
val 164
```

Maybe related to #308

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at the stepper precision logic and reproduce the issue with the springConfig and Motion example from the report. Compare the documented rounding and stopping behavior with the logged values; done means the precision behavior is either corrected or clearly verified against the documentation.

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
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.