Skip to content

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

@sanch941

Description

@sanch941

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    template: requestis a request someone has submitted

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions