chenglou / chenglou/react-motion
Negative timeDelta in first raf of startAnimationIfNecessary()
- 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