4 ms·

Hammer.js: Add touch gestures to your page

77 points by sconxu 11y ago

kitbrennan 11y ago
MacBookPro user - not really sure what I'm supposed to be experiencing? I can click and drag the white box and it moves back to its original position, is that it? I've tried all the standard Mac touch gestures. Is this library only for tablets? The page that was linked is pathetically vague.
- sirsar 11y ago
  The box displays different animations based on which type of swipe was detected. At least on Windows 7 Chrome.
- supercoder 11y ago
  It's for mobile touch events. OSX doesn't expose any touch events to the browser.
- mrweasel 11y ago
  I don't think it works, at all, if the OS uses the gestures. The demo page does nothing on my Mac with a trackpad. Gestures are tricky thing to use on a web page, because you have almost zero discoverability. It works in Mac OS X, because you can choose to not use the features and slowly learn them over time, through guides in the OS. Still, even on the Mac you sometimes get surprised when you accidentally trigger a gesture. Many have be fans an proponents of gestures since the time Opera introduced mouse gestures. Personally the swiping between workspaces on the Mac is pretty much the gesture I think works.
- therealmarv 11y ago
  Pinch and zoom is a scroll wheel event so it is not covered by hammer.js (but possible with fetching that scroll wheel event with other methods). Gestures are not supported by HTML5 on Laptops as far as I know.
- LePetitDev 11y ago
  Hammer.js is for use on touch screens, not trackpads. I found the demo on the page to be a bit vague, too, but a much better demo in the following Codepen convinced me to use it. Plus, it has a much lighter footprint than Interact.js. http://codepen.io/klawdyo/full/azmapQ/ http://codepen.io/klawdyo/full/azmapQ/ On a non-touch screen, hold shift while dragging the green box to emulate pinch and rotate gestures.
wakeless 11y ago
We've been using this for a while, documentation isn't great, but it seems it's the best library for what it does. We had particular trouble with double tap recognition early on but I believe V2 improved this substantially.
- alexisnorman 11y ago
  That's really good to know about the double tap functionality. My team was pumped on implementing this into our Rails app and had to give up because of how buggy it was. The whole experience made us extremely envious of Angular's touch directives.
speg 11y ago
I like the design. Clean and simple, bright and bold. I like the font, and I liked red too.
- richerlariviere 11y ago
  I like the home button.
winterbe 11y ago
I'm missing M.C. Hammer from the older version. =(
- eivindga 11y ago
  Try pressing the button...
ramon 11y ago
It's the best touch gestures for mobile library currently out there, I've tested a couple and in my current project I'm using this one! It's by far the easiest and smallest lib out there, great work guys! :)
jjar 11y ago
> var hammertime = new Hammer(myElement, myOptions); > hammertime.on('pan', function(ev) { > console.log(ev); > }); This made me laugh
notjustanymike 11y ago
I've used hammer.js professionally. It's small, reliable, and provides useful things like deltas. It also pairs great with mousetrap (https://github.com/ccampbell/mousetrap https://github.com/ccampbell/mousetrap) for keyboard interaction. Would recommend.
tbassetto 11y ago
You should now that this project is abandoned and is looking for a new maintainer since January 2015: https://github.com/hammerjs/hammer.js/issues/749 https://github.com/hammerjs/hammer.js/issues/749 (also issues on GitHub have been piling up for quite a long time).
- paulftw 11y ago
  That's a shame. Hammer is an awesome little lib, I think I started using it back in 2013, have only good things to say about it.
- talmand 11y ago
  I glanced through a number of issues and many of them were not bugs at all but more like "how do I do this?", "what's wrong with my code?" or just comments in general. Makes me wonder how many of them are actually bug reports. Plus there's a decent number of pull requests so it looks like the community is contributing, just no one to maintain.
91bananas 11y ago
A similar lib, but slightly different focus: http://interactjs.io/ http://interactjs.io/ I know this one to be very well maintained currently as evidenced here https://gitter.im/taye/interact.js https://gitter.im/taye/interact.js

77 points by sconxu 11y ago

MacBookPro user - not really sure what I'm supposed to be experiencing? I can click and drag the white box and it moves back to its original position, is that it? I've tried all the standard Mac touch gestures. Is this library only for tablets? The page that was linked is pathetically vague.

sirsar 11y ago
The box displays different animations based on which type of swipe was detected. At least on Windows 7 Chrome.
supercoder 11y ago
It's for mobile touch events. OSX doesn't expose any touch events to the browser.
mrweasel 11y ago
I don't think it works, at all, if the OS uses the gestures. The demo page does nothing on my Mac with a trackpad. Gestures are tricky thing to use on a web page, because you have almost zero discoverability. It works in Mac OS X, because you can choose to not use the features and slowly learn them over time, through guides in the OS. Still, even on the Mac you sometimes get surprised when you accidentally trigger a gesture. Many have be fans an proponents of gestures since the time Opera introduced mouse gestures. Personally the swiping between workspaces on the Mac is pretty much the gesture I think works.
therealmarv 11y ago
Pinch and zoom is a scroll wheel event so it is not covered by hammer.js (but possible with fetching that scroll wheel event with other methods). Gestures are not supported by HTML5 on Laptops as far as I know.
LePetitDev 11y ago
Hammer.js is for use on touch screens, not trackpads. I found the demo on the page to be a bit vague, too, but a much better demo in the following Codepen convinced me to use it. Plus, it has a much lighter footprint than Interact.js. http://codepen.io/klawdyo/full/azmapQ/ http://codepen.io/klawdyo/full/azmapQ/ On a non-touch screen, hold shift while dragging the green box to emulate pinch and rotate gestures.

wakeless 11y ago

We've been using this for a while, documentation isn't great, but it seems it's the best library for what it does. We had particular trouble with double tap recognition early on but I believe V2 improved this substantially.

alexisnorman 11y ago
That's really good to know about the double tap functionality. My team was pumped on implementing this into our Rails app and had to give up because of how buggy it was. The whole experience made us extremely envious of Angular's touch directives.

speg 11y ago

I like the design. Clean and simple, bright and bold. I like the font, and I liked red too.

richerlariviere 11y ago
I like the home button.

winterbe 11y ago

I'm missing M.C. Hammer from the older version. =(

eivindga 11y ago
Try pressing the button...

ramon 11y ago

It's the best touch gestures for mobile library currently out there, I've tested a couple and in my current project I'm using this one! It's by far the easiest and smallest lib out there, great work guys! :)

jjar 11y ago

> var hammertime = new Hammer(myElement, myOptions); > hammertime.on('pan', function(ev) { > console.log(ev); > }); This made me laugh

notjustanymike 11y ago

I've used hammer.js professionally. It's small, reliable, and provides useful things like deltas. It also pairs great with mousetrap (https://github.com/ccampbell/mousetrap https://github.com/ccampbell/mousetrap) for keyboard interaction. Would recommend.

tbassetto 11y ago

You should now that this project is abandoned and is looking for a new maintainer since January 2015: https://github.com/hammerjs/hammer.js/issues/749 https://github.com/hammerjs/hammer.js/issues/749 (also issues on GitHub have been piling up for quite a long time).

paulftw 11y ago
That's a shame. Hammer is an awesome little lib, I think I started using it back in 2013, have only good things to say about it.
talmand 11y ago
I glanced through a number of issues and many of them were not bugs at all but more like "how do I do this?", "what's wrong with my code?" or just comments in general. Makes me wonder how many of them are actually bug reports. Plus there's a decent number of pull requests so it looks like the community is contributing, just no one to maintain.

91bananas 11y ago

A similar lib, but slightly different focus: http://interactjs.io/ http://interactjs.io/ I know this one to be very well maintained currently as evidenced here https://gitter.im/taye/interact.js https://gitter.im/taye/interact.js