ZingTouch and gestures handling in JS – a great Hammer.js alternative

Looking for gestures library in JavaScript? You can try Hammer.js or try a great alternative: ZingTouch.

ZingTouch as Hammer.js alternative

ZingTouch is a modern JavaScript touch gesture library. The library allows developers to configure pre-defined gestures. Also it let us to create our own, using library’s life cycle.

Implement gestures easy, and configure to own needs. ZingTouch comes with main gestures:

– Tap
– Swipe
– Distance
– Pan
– Rotate

These gestures can be customized including the number of inputs it accepts, or how sensitive the gesture is to be recognized.

ZingTouch demo
ZingTouch demo

Usage

Install and include:

// var ZingTouch = require('zingtouch');
// ES6
import ZingTouch from 'zingtouch';

Then create a Region:

var zt = new ZingTouch.Region(document.body);
var myElement = document.getElementById('my-div');

zt.bind(myElement, 'tap', function(e){
  // Do your stuff here...
}, false);

ZingTouch Life Cycle

Utilizing life cycle (start, move, end) allows you to create new gestures and to interface with the mobile event cycle in a much finer detail. It will allow you to hook into events and to apply external functions during events. Imagine the Pan gesture allowing in-between events to be triggered:

– Pan – start
– Pan – move
– Pan – end
– Pan – Event detected.

The syntax for utilizing the life cycle is still to be determined, but will be released in the near future.

Full usage instructions and examples you can find here.

License: MIT

Homepage

https://zingchart.github.io/zingtouch

GitHub

https://github.com/zingchart/zingtouch

You may also like

Hammer.js library + tutorials

JavaScript Mind Map visualization and management – MindMup MapJs

Responsive ReactJS carousel gallery: react-image-gallery

Detect mobile in JavaScript – Vue.js example

BaguetteBox.js – vanilla JS gallery and lightbox!

Mobile friendly datepicker: react-dates

Enjoy!