pmndrs / pmndrs/react-spring

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

Open
#2,403 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

template: request
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

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.