chenglou / chenglou/react-motion

Negative timeDelta in first raf of startAnimationIfNecessary()

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

Description

Totally love this library, thanks for your work, guys!! So I was digging through Motion to see how it works and I noticed that in the *first* raf of `startAnimationIfNecessary()`, `timeDelta` was always negative (on Chrome 57 / Mac). This in turns makes a negative `this.accumulatedTime` and a negative `framesToCatchUp`.

At first I wasn't thinking about other browsers 🙄 but when I did, I went from trying to reason how `currentTime` could be less than `this.prevTime` to wondering if `this.prevTime = defaultNow();` is doing what you want. Basically it boils down to this:

```
console.log(performance.now())
requestAnimationFrame(timestamp => console.log(timestamp));

Chrome: performance.now() is greater than timestamp
Safari: performance.now() is less than timestamp
Firefox: Goes back and forth
```
I've never dug that deep into `requestAnimationFrame` so I could easily be missing something. Also, the above browser claims aren't robustly tested.

Anyway, since I can't tell if there's a reliable relationship between the `this.prevTime` set by `defaultNow()` and raf's `timestamp`, is it okay to use `this.prevTime = defaultNow();` or would it be better to wait until you have two timestamps from raf?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at startAnimationIfNecessary() and inspect how defaultNow() initializes prevTime before the first requestAnimationFrame callback. Compare that value with the callback timestamp across the browser behavior described in the issue. Done means deciding on a reliable initialization approach and preventing the first frame from producing negative timeDelta, accumulatedTime, or framesToCatchUp.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.