react-spring icon indicating copy to clipboard operation
react-spring copied to clipboard

Make decay easing respect the `config.precision` prop

Open claytercek opened this issue 3 years ago • 2 comments

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

claytercek avatar May 20 '22 18:05 claytercek

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)

vercel[bot] avatar May 20 '22 18:05 vercel[bot]

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

codesandbox-ci[bot] avatar May 20 '22 18:05 codesandbox-ci[bot]