How to expose the gesture direction

[bokand]

On Android - the system back gesture can be triggered from either the left or right edge of the screen. Unlike browser-based traversal gestures, both edges perform the "Back" action. We'd expect a common case to be sites implementing a "swipe card away" type gesture. It'd be awkward if this swiped the current page to the right when the user swipes left so authors would need the direction information to setup their animations correctly.

Some first thoughts:

1) Separate timeline names. E.g. ua-gesture-back-left-edge 2) Providing a parameter to the timeline ua-gesture-back(left). Has the advantage that ua-gesture-back can be a shorthand for "all gesture-back timelines" 3) A property on a "transition starting" event (see #2) - e.g. transition.backDirectionReversed

[khushalsagar]

We want to expose the direction in both script and CSS right? For script using the event on https://github.com/bokand/gesture-vt/issues/2 sounds perfect.

For CSS, I don't see how authors would use a separate timeline name to customize the animation. For example, you'd select a keyframe based on the edge right? One interesting way could be to make it a UA provided view transition type. Then authors could do something like:

:root:active-view-transition(-ua-gesture-back-left) {
  ::view-transition-old(root) {
    animation-name: slide-to-right;
  }
}

Though this doesn't help if the author is animating without VT. I suppose it could also be an independent pseudo-class which is activated when an element has an ongoing gesture.

:root:ua-gesture-back-left {
   ...
}

[bokand]

For CSS, I don't see how authors would use a separate timeline name to customize the animation

Hmm, yeah I was thinking we could define two animations and tie each to a separate timeline. But it looks like that's can't conveniently be expressed in CSS: an element can have multiple animations but just one animation-timeline. For certain effects I think you can fake it by animating different fake ancestor elements (in this example each box could represent one of the mutually exclusive --ua-back-timelines). I think Web Animations supports setting different timelines on different animations of the same Element?

[bokand]

I suppose it could also be an independent pseudo-class which is activated when an element has an ongoing gesture.

This seems like the most straightforward way to me. We could make it more generic so that it includes other timelines (e.g. for future use with a "gesture timeline"), e.g.:

:root:active-gesture(-ua-gesture-back-left) {
  ::view-transition-old(root) {
    animation-name: slide-to-right;
  }
}

:root:active-gesture(--refresh-gesture) {
  ::view-transition-old(root) {
    animation-name: stretch-down;
  }
}

For JS - the events we're discussing in #2 could be based on the gesture which would extend well in the future. E.g.

  addEventListener('gesturestart', e => {
    e.timelineName; // "-ua-gesture-back-left"
    e.viewTransition;  // non-null if the gesture is associated with a preemptive trigger
  });

[bokand]

One more point to consider - we probably want a symmetric "forward" timeline for gestures causing a forward navigation. This doesn't exist on Android (so would never be activated) but does exist on e.g. iOS / Mac.

I think this is preferable to simple pair -ua-gesture-left | -ua-gesture-right since, depending on the platform those might have different semantic meanings that the app can't easily infer (i.e. which edge is "back", whether both edges are "back").

So this means the API would have timelines: -ua-gesture-back-left, -ua-gesture-back-right, -ua-gesture-forward-left, -ua-gesture-forward-right.

(forward-left would be used on platforms like iOS with an RTL UI language)