material-motion-js
material-motion-js copied to clipboard
Create interaction for threshold + velocity
The most useful abstraction missing from MM right now is something that synthesizes velocity and threshold. Our inputs look something like this:
- An axis
- A series of stops, where the dragged item will potentially land when released
- Some way of mapping velocity to a distance or number of stops to advance
- A velocity stream
- A translate stream
We need at least these outputs:
- preview index (e.g. which index is active, based on the current translate)
- index (only updated on release)
- destination (e.g.
thresholds[index])
This has all been done in prototype code and not landed in the library because it wasn't clear what the right abstraction is. Given its a common need with complex inputs and outputs, this should probably be an interaction.
Open questions:
- What should be configurable?
- Should the velocity mapping and drag thresholds be tunable, or shared across all uses of this interaction?
- Do we need to support both absolute and relative thresholds?
- What about an infinitely long carousel?
- What about a bottom sheet?
- Should it set the spring's destination upon release?
- How does it interact with application state?
- Does the application listen to this interaction's outputs and update its own state?
- Is there an
index$property on this interaction, which holds the canonical state?