pmndrs / react-spring

✌️ A spring physics based React animation library
http://www.react-spring.dev/
MIT License
27.98k stars 1.19k forks source link

[Request] Be able to set spring config per value #1803

Open krispya opened 2 years ago

krispya commented 2 years ago

🚀 Feature Proposal

The idea is to be able to set a spring config per value in a single useSpring.

Motivation + Example

I like to use a single useSpring per component where possible and when doing more complex motion design I need individual values to have their own spring config. This especially becomes important when the spring config is modified depending on the state of the app and user interactions. For example, I may have an opacity value that I want to always transition with a linear duration but an x value that toggles from being stiff to wobbly depending on its direction of motion (open or close).

Currently I have to make two springs to handle this case and then use their apis in sync.

Note: I thought I could use a useSpringRef for a single api to control both springs but I couldn't figure out how to change the config for individual springs this way.

Here is a sandbox: https://codesandbox.io/s/dreamy-turing-3kpom?file=/src/App.js

krispya commented 2 years ago

This came up again. In other cases I tried using useSprings, which while it is less convenient is technically correct. However, when using useTransition not having the ability to set config per value makes it impossible to do more complex motion design.

joshuaellis commented 2 years ago

It's an interesting concept. Considering the values we use are passed to the SpringValue class, in theory it's not too far fetched to implement...

I'll put it on my radar 👌🏻