Cancelable transitions about material-motion-js HOT 8 CLOSED

Augh we can so easily build a thing like that :)

CardStack: Director {
  var grabbedCard

  function setUp(transaction) {
    foreach card {
      transaction.add(new Grabbable(delegate: self), name:"interaction", card)
    }
  }

  function didGrab(grabbedCard) {
    transact(function(transaction) {
      foreach card {
        transaction.add(new Tappable(delegate: self), name:"interaction", card)
      }
      transaction.add(new Draggable(), grabbedCard)
    })
  }

  function didTap(tappedCard) {
    transact(function(transaction) {
      transaction.add(new SpringAnchoredTo(grabbedCard), card)
    })
  }
}

from material-motion-js.

Bonus challenge: allow interaction with the rest of the software while the transition is being canceled. (this is presently hard to do on iOS, for example).

from material-motion-js.

Reminds me of @andymatushak's React 2016 talk about being able to drag a stack of cards around with one finger and add new cards to the stack by tapping them with another finger during the drag. Pretty sure this is in the litmus doc.

from material-motion-js.

All plans made up now just for sake of exploring an implementation; not specifically happy with any of them.

from material-motion-js.

/tangent

from material-motion-js.

you've broken me

from material-motion-js.

Copy/pasting some notes from an old brainstorm I did on this (before @schlem suggested treating all interactions during a transition as a cancel):

Consider these routes:

• /listen-now/ (or /search/strfkr/)
• /strfkr/miracle-mile/
• /hot-chip/
• /bloc-party/silent-alarm/

If someone clicked through them in rapid succession (e.g. before onRest), you’d want:

• Miracle Mile cover art starts to fly to hero slot
• Hot Chip label starts to fly to hero position, while Julius cover art goes back to destination
  • The actual transition between listen-now and artist is not nec. defined. Neither labels nor band photos transition in the current version of the app.
• Silent Alarm cover starts to transition to hero position, while Hot Chip and Miracle Mile continue to retreat to their homes on Listen Now

To handle this correctly implies:

• View duplication for shared elements. Otherwise, Silent Alarm could replace Miracle Mile before it completes its transition. View duplication is seriously hard in a world with inheritable CSS - it would need some recursive getComputedStyle sorcery that is unlikely to be fast enough to suffice. If you ignore the cascading problem, inducing authors to use styles that don’t cross the transition boundary, it gets less-hard.
  • The from elements already exist with the correct positions in the cascade, but likely at the wrong resolution and z index.
  • How do you handle circle-to-square transitions, eg artist?
  • Only shared elements should be duplicated. Otherwise, you’ll end up stacking redundant views on top of each other, which will throw off the shadows and transparency.
• Independent springs for each transition to handle multiple aborts resiliently.

The simple and common (though less than ideal) solution is to disallow interactivity during a transition. How would this affect {stop,back,forward} browser buttons?

If you can put a scrim between the From and To views, does that change the complexity here?

• Maybe wrap the From view in a scrim that uses event capturing to history.back()
  • Should probably reverse the timeline and ignore taps after that until the timeline comes to rest(ish). Rest on a spring is felt in the .9s, even though it doesn’t trigger until 1.0

from material-motion-js.

Closing this until we begin pursuing transitions.

from material-motion-js.