HTML5 and Multitouch – Hammer.js

HTML5 and Multitouch – Hammer.js

A few months ago, I published an article in Appliness about HTML and multitouch. The Hammer.js library developed by Eight Media is now in version 1.0.3. It’s a light and impressive library to enable multitouch experiences on iOS and Android devices (or any WebKit browser combined with a multitouch screen).

I’ve developed a small sample to demonstrate the capabilities of this library. The best experience is definitely on the iPad or in Safari 6.

Link to the sample: http://creativedroplets.com/samples/multitouch/

Link to the source on GitHub: https://github.com/michaelchaize/appliness/tree/master/multitouch-hammer

Desktop vs. Mobile

You’ll get the best experience on an iPad. The performance is just awesome. When the sample runs in Safari, you have  a  ‘native-like’ experience. On your desktop, a Hammer.JS plugin emulates multitouch (to create two points, press SHIFT and click on the picture). Then, you can emulate pinch and rotation. The best experience on desktop computers is definitely within Safari. I have weird visual bugs with Chrome, and the library doesn’t work in Firefox.

Anyway, as you want to enable a multitouch experience, iOS and Android are definitely the platforms of choice, and Hammer.JS behaves very well on mobile devices.

Getting started with the code – HTML

Let’s start with the HMTL document. You just have to declare two DIV elements, one that will catch the event and one that you want to transform.

Then you need to import the Hammer.js libraries, plus the plugins if you want to emulate multitouch on desktop computers. If you use jQuery in your website, then also import the jQuery plugin for Hammer.JS

The polaroid look is obtained with simple CSS properties.

 Getting started with the code – JavaScript

You can use the Hammer.JS plugins to emulate multitouch on your desktop computers. Using the mouse and the SHIFT key, you can pinch and zoom the pictures. Here is how to load these plugins:

Then you instantiate the Hammer object, and set some parameters and variables. At the end, I have a callback function for four events: touch, drag, dragend, transform. There are more events available in the API, but I don’t need them.

Basically, it will catch all kinds of multitouch events on your DIV. That’s why I use a switch to control the variables of my final ‘transform’ property. As you can see, it’s using translate3D, and scale3D. It’s hardware accelerated on iOS, that’s why it looks like a native experience.

It’s that easy. There are more samples available when you download the Hammer lib on GitHub. I hope to see more multitouch gestures in mobile websites.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

23 Comments

  1. way cool. i’ve been looking for a good ios touch/gesture lib for jquery and this may be it. thanks heaps.

    • Cool. On iOS it’s indeed very good, you should give it a try.

  2. Does this library support SVG files instead of image? What if I pinch zoom the div containing the SVG, will it retain the SVG zooming properties (without compromising the clarity of the document?

    • Hi Michael Chaize,

      First of all, thanks for sharing your script. It works like a charm.

      I only run into the same issue as Kris. I’m using a SVG file instead of JPEG. When I pinch to zoom in, the quality of my SVG is becoming really compromised. The content of my SVG is a map and streets names are unreadable.

      Any tip to help me to fix it?
      Thank you so much for your response.

  3. doesn´t work at all :( the image is croping itself while dragging and pinch zoom is not working either.. -> NEXUS 4

  4. strange now it´s working… i am sorry bro…

    • ha.. the joy of CSS :) I know that my sample is optimised for iOS (as mentioned in the article). That’s what it may generate weird behaviours on Android. What is your Android OS version ?

  5. HI
    Very nice example!
    I noticed that with the new Internet Explorer 10
    the example does not work properly, if you click on the picture it disappears…
    Please, could you fix it?
    Thank you
    Giuliano C.

    • Same problem with Firefox

  6. this is not working for android

    • Hi Amit. Indeed, and it’s mentioned in the article. Actually, it depends on the version of Android. I have good hope that once Chrome becomes the official browser of Android, it will work like a charm.

  7. Hello!

    First of all thanks!!

    I’m trying to implement this in adobe edge animate but without succeeding… do you or someone has the solution please?

    Many thanks and best regards

    Massimo

  8. Thank you for this. It works great. But how can I do it with multiple images? I have 5-8 images and I want to manipulate each one of them. Would that be possible?

  9. The initial value for rotation must be zero, not 1.

    like this:

    var posX=0, posY=0,
    lastPosX=0, lastPosY=0,
    bufferX=0, bufferY=0,
    scale=1, last_scale,
    rotation= 0, last_rotation, dragReady=0;

    • I had to change 0 to 1 in

      var transform =
      “translate3d(“+posX+”px,”+posY+”px, 0) ” +
      “scale3d(“+scale+”,”+scale+”, 1) ” +
      “rotate(“+rotation+”deg) “;

      or else the image would disappear

  10. More hammer.js multitouch demos would be awesome!

  11. No luck with the Nokia Lumina… deltaX and deltaY return null. :( Works on all others. Thanks.

  12. Hi Michael C,

    Thanks for sharing the tutorial.

    I am trying ti implement this tutorial to prototype my grad thesis project.

    Link attached here

    http://www.hututu.co/rakhiP/index.html

    The problem is currently the image is scaling based on touch events in the grey box.i.e. the pinch and zoom is occurring on the grey box and the image is scaling in the side column (marked up only for the first grey image currently)

    What I would like to happen , is when the image is dropped from the side column into the grey box then it can be scaled and rotated.

    I am currently using Jquery draggable to drop the images from the side column into the grey box.

    Hope you can help me solve this proble. I have been at this since the past 48 hrs!!at my wits end now…

    Thanks in advance

  13. This is fantastic but how do I remove the drag and rotate functions?

  14. Hi,
    Is it possible to give filter effects like sepia to poloroids as we can give to normal images.

  15. I used the above code for multi touch for Single Image it was awesome but How to get it to work for a dynamically generated list of images ?

  16. the image disappears on the first touch.

    Chrome Version 42.0.2311.152 (64-bit)

    • On osx 10.9.2

Trackbacks/Pingbacks

  1. HTML5 and Multitouch – Hammer.js | simpleex - [...] A few months ago, I published an article in Appliness about HTML and multitouch. The Hammer.js library developed by…

Submit a Comment

Your email address will not be published. Required fields are marked *