material-motion-js icon indicating copy to clipboard operation
material-motion-js copied to clipboard

Create interaction for threshold + velocity

Open appsforartists opened this issue 8 years ago • 0 comments

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?

appsforartists avatar Oct 08 '17 06:10 appsforartists