“The rise of touch and gesture-driven devices has dramatically changed the way we think about interaction. Gestures are more than merely entertaining, they are very useful and feel familiar” — Nick Babich, In-App Gestures And Mobile App User Experience.
Mobile touch gestures have become a vital part of every single app, a part that most users don’t even realize is there. Who doesn’t love (smooth) interactive apps?
And yet, it is incredibly easy to hate the mess and math that might come with it. A shocker, I know, especially when you are not the one who did the first piece of the code or if you are there only to maintain it.
It can be, at times, a thankless job. The kind that leaves you staring at the screen with one hand on your forehead while the other is resting on the mouse, scrolling time away.
A dramatization of the code’s feelings towards any changes (source: giphy.com)
Having — dare I say it? — silky smooth mobile touch gestures and their animations can be a challenge and one that becomes more and more prominent as the days go by. But that is a battle for another day. Or another article. Or both.
Today, we want to show you how to create a native-like menu with gestures.
Let the alpacas take the stage!
So, before I move on to the actual code, there are a few things I want to go through, so bear with me.
- touchstart: Triggered when you touch a DOM element.
- touchmove: Triggered when you drag your finger along a DOM element.
- touchend: Triggered when you remove your finger from a DOM element.
In these events, I’ll be using the touches property (there are two other properties but this is the one I care about for now). The touches property lists all fingers currently on the screen:
- PageX: Returns the x coordinate of where the finger is placed in the DOM. It’s measured from the left edge and considers horizontal scroll, if applicable.
- PageY: Returns the y coordinate of where the finger is placed in the DOM. It’s measured from the top edge and considers vertical scroll, if applicable.
And You Need To Know About requestAnimationFrame, Too
The requestAnimationFrame function tells the browser that you want to perform an animation. It asks the browser to call a specified function that will update an animation before the next repaint. Here’s what’s good about it:
- The browser will try to match the display refresh to allow for smooth animations.
- Animations in inactive tabs will stop (so less effort on the CPU).
- It doesn’t drain your battery life.