DEV Community

Cover image for Implement pinch gesture
AlekseiKorolev
AlekseiKorolev

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)

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay