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

[feat]: Integrate M3 Expressive's stiffness and damping

Open sanch941 opened this issue 2 months ago • 0 comments

A clear and concise description of what the feature is

Hi, take a look at M3 Expressive's motion physics system.

It's a design pattern for animating objects in UI. Main parts are stiffness and damping take a look at the image below

Image

I've come to realize that we can adapt stiffness and damping from M3 Expressive to React Spring. I'm facing some obstacles with adapting damping though.

I see that tension is good as stiffness value from m3 expressive, but friction needs some factor like this ` const mass = 1; const stiffness = 1800; const damping = 0.6;

const tension = stiffness; const friction = 2 * damping * Math.sqrt(stiffness * mass); `

I'm not sure that i'm doing right with the formula, what do u think?

https://codesandbox.io/p/sandbox/staging-snow-sqlvdx?file=%2FApp.js%3A15%2C31

Why should this feature be included?

M3 Expressive is a great standard for spring animations. It makes UI alive and fluid

Please provide an example for how this would work

https://codesandbox.io/p/sandbox/staging-snow-sqlvdx?file=%2FApp.js%3A15%2C31

sanch941 avatar Oct 03 '25 05:10 sanch941