Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Make decay easing respect the config.precision prop #1897

Merged
merged 5 commits into from Aug 17, 2022

Conversation

claytercek
Copy link
Contributor

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

  • Documentation updated
  • Ready to be merged

@vercel
Copy link

vercel bot commented May 20, 2022

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)

@codesandbox-ci
Copy link

codesandbox-ci bot commented May 20, 2022

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 3de005d:

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

Copy link
Member

@joshuaellis joshuaellis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure how I missed this so sorry for the late reply, but this is a great catch thank you! I have one small request though, see comment!

packages/core/src/SpringValue.test.ts Outdated Show resolved Hide resolved
@joshuaellis joshuaellis changed the title Make decay easing respect the config.precision prop fix: Make decay easing respect the config.precision prop Aug 17, 2022
@joshuaellis joshuaellis merged commit 3b6485e into pmndrs:master Aug 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants