DEV Community

Cover image for Implement pinch gesture

Posted on

Implement pinch gesture

To recognize the gesture, we use two events 'touchestart' and 'touchend'.
Start will fire first, and we have to check exactly how many touches we need. In this case, two should be enough.
End will fire twice. The first will contain only one touch data. The second one will be empty.
What we do is save the coordinates of the start touches and compare them with the end ones. If the end touch is outside the range between the start touches, this means that we are zooming in, otherwise, we are zoomin out.
Live example (use on phone)

Discussion (0)