Web Depot: Hammering Out Gesture Controls

Stephen Yagielowicz

The move to mobilization is motivating many website designers to adopt gesture controls for easier access and navigation by mobile device users. Enter Hammer.js, an open source JavaScript library that recognizes user gestures made by touch, mouse, or pointer event. The script does not have any dependencies, and is very lightweight, at only 3.96kb when minified and gzipped.

Completely rewritten to provide reusable gesture recognizers along with improved support for the most recent mobile browsers, Hammer.js makes use of the touch-action CSS property whenever possible, and supports multiple Hammer instances at the same time to allow multi-user interaction. The script is easy to use, and only requires the inclusion of the library and the creation of a new instance.

By default, Hammer.js adds gesture recognizers for tap, double tap, press, horizontal pan and swipe, and optionally for multi-touch pinch and rotation, as well as vertical pan and swipe recognizers and custom gesture recognizers as well.