react-spring
react-spring copied to clipboard
Make decay easing respect the `config.precision` prop
Why
The current behavior for a decay animation is to finish when the difference between the current spring value and the value during the previous frame is less than the arbitrary value of 0.1. In most cases this is alright, but if the scale of the animation is significantly small, then we start to notice some weird behavior, where the animation seems to stop prematurely. Here's an example codesandbox where you can simulate different scales: https://codesandbox.io/s/react-spring-decay-scale-j5kfqm?file=/src/App.js
One situation where this is particularly apparent is when using react-spring in combination with react-three-fiber, and animating in world space. Demo here: https://codesandbox.io/s/r3f-inertia-camera-qqhvxk?file=/src/InertiaCamera.js
What
This PR replaces that arbitrary 1.0 value with the same precision value being used for spring easing.
I've moved the precision calculation to a slightly higher scope, so that it can be shared between both spring and decay easing.
Checklist
- [x] Documentation updated
- [x] Ready to be merged
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Updated |
|---|---|---|---|
| react-spring-io | ✅ Ready (Inspect) | Visit Preview | Aug 11, 2022 at 9:37PM (UTC) |
This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
Latest deployment of this branch, based on commit 3de005de17aaf5f198f76e030fedab404d941a22:
| Sandbox | Source |
|---|---|
| spring-animating-auto | Configuration |
| spring-card | Configuration |
| spring-cards-stack | Configuration |
| spring-chain | Configuration |
| spring-css-keyframes | Configuration |
| spring-draggable-list | Configuration |
| spring-exit-before-enter | Configuration |
| spring-flip-card | Configuration |
| spring-goo-blobs | Configuration |
| spring-image-fade | Configuration |
| spring-list-reordering | Configuration |
| spring-masonry | Configuration |
| spring-multistage-transition | Configuration |
| spring-notification-hub | Configuration |
| spring-notification-hub | Configuration |
| spring-notification-hub | Configuration |
| initial-rocket | Configuration |
| spring-simple-transition | Configuration |
| spring-svg-filter | Configuration |
| spring-slide | Configuration |
| spring-tree | Configuration |
| spring-viewpager | Configuration |
| react-spring decay scale | PR |
| r3f inertia camera | PR |