Allowing multiple gestures on a single layer

’s Scroll and Pop Switch patches make it easy to build common swipe interactions.

Scroll lets you make free scrolling views or paginated carousels.
Pop Switch lets you transition between two states.

But I discovered it’s hard to use them together in a popular card-style interaction: swiping horizontally to select, swiping vertically to show details. Both are handled at the same time, creating an awkward drag effect.


So I worked out a pair of Swipe Horizontal and Swipe Vertical patches to distinguish the swipe direction. These patches work together to lock the direction of the dominant swipe.

Better! (Note: the actual prototype has more logic than this, but I trimmed it down for clarity.)

Wanna try this in your own prototype? You can get Swipe Horizontal and Swipe Vertical with my Origami patch system.

Wanna know how it works? Keep reading!

Handling a Swipe

I’ve solved the multidirectional swipe problem with JavaScript before.

const start = {x:0, y:0};
// Capture the starting touch position.
document.addEventListener('touchstart', event => {
start.x = event.touches[0].pageX;
start.y = event.touches[0].pageY;
// When the touch moves, compare change
// in X direction to change in Y direction.
document.addEventListener('touchmove', event => {
let dx = Math.abs(event.touches[0].pageX - start.x);
let dy = Math.abs(event.touches[0].pageY - start.y);
  if (dx > dy) {
console.log('Horizontal swipe.');
} else {
console.log('Vertical swipe.');

Using the touchstart and touchmove events, you can track a touch point’s x and y position changes. The greater of these two changes will tell you the intended direction of a swipe.

Origami doesn’t exactly have the JavaScript touch event indicators, but with the Mouse patch as a foundation, I could make my own.

JavaScript touch events, Origami style.

From here, it would’ve been pretty simple to make a couple of patches that signal a horizontal or vertical swipe. But I saw an opportunity to make a set of patches for any swipe direction: up, down, left, right.

A little trigonometry reveals the angle created by the change in X and Y. I then used the angle to assume a swipe direction.

With the Swipe Direction patch, I could create individual patches for signaling specific directions.

I could then use the Swipe Horizontal and Swipe Vertical patches to prevent a Scroll and Pop Switch from occurring at the same time.

The working prototype.

Another fun win for Origami and visual programming. Hope you find it useful!

Source link—-eb297ea1161a—4


Please enter your comment!
Please enter your name here