[feat]: Integrate M3 Expressive's stiffness and damping
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 29.1k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
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
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox and its App.js example, then read the referenced M3 Expressive motion-physics documentation. Compare the proposed stiffness, damping, tension, and friction values through representative animations. Done requires an agreed API or conversion scope plus a reproducible example showing the intended behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100