How to implement pinch-to-zoom with Hammer.js?

Use the pinch recognizer by adding it to a Hammer Manager, then subscribe to the pinch event to adjust element scale based on e.scale. You'll need to handle CSS transforms yourself for the zoom effect, as Hammer.js doesn't provide built-in animations.

Hammer.js vs TouchSwipe.js – which is better for swipe gestures?

Hammer.js is more comprehensive, supporting multiple gestures and custom configurations, while TouchSwipe.js is focused solely on swipe. For simple swipe-only needs, TouchSwipe.js might be lighter, but Hammer.js offers broader flexibility for multi-gesture projects.

Can Hammer.js handle gestures on desktop with a mouse?

Yes, Hammer.js simulates touch gestures with mouse input, making it useful for cross-device compatibility. However, it's optimized for touch-enabled devices, so some nuances like multi-touch might be limited on desktop.

How to create a custom gesture like a triple tap in Hammer.js?

Define a new Tap recognizer with the event set to 'tripletap' and taps set to 3, add it to a Hammer Manager, and subscribe to the event. The README provides a clear example with code snippets for this process.

Is Hammer.js still actively maintained?

Check the GitHub repository for recent activity; as of now, it has a steady user base but may have slower updates. For cutting-edge features or modern browser APIs, consider newer libraries like Interact.js or native Pointer Events.

How to prevent gesture conflicts in Hammer.js when multiple elements have listeners?

Use the manager to set options like enable and requireFailure to control recognition priorities. You can also stop event propagation or use multiple managers to isolate gestures for different elements.

hammer.js — Multi-Touch Gesture Library

What is hammer.js?

Hammer.js is a JavaScript library that detects and recognizes multi-touch gestures in web applications. It solves the problem of adding intuitive touch interactions to websites and web apps, enabling gestures like taps, swipes, and pinches without native browser support complexities.

Target Audience

Frontend developers building touch-enabled web applications, especially for mobile devices or interactive web interfaces.

Value Proposition

Developers choose Hammer.js for its simplicity, lightweight footprint, and flexibility in handling both built-in and custom gestures with a clean API.

A javascript library for multi-touch gestures :// You can touch this

Use Cases

Best For

Adding swipe navigation to mobile web apps
Implementing pinch-to-zoom in web-based image viewers
Creating interactive touch-based games for browsers
Building custom gesture controls for data visualization dashboards
Enhancing mobile web forms with gesture-based interactions
Developing touch-friendly UI components for cross-platform web applications

Not Ideal For

Applications built with modern frameworks like React or Vue that have integrated gesture libraries (e.g., Framer Motion, vue-touch)
Projects requiring out-of-the-box gesture animations and visual feedback, as Hammer.js only handles detection, not styling
High-performance gaming or VR applications needing low-latency, hardware-accelerated input handling beyond basic gestures
Accessibility-first projects where gesture support must be deeply integrated with keyboard navigation and ARIA roles without extra setup

Pros & Cons

Pros

Wide Gesture Support

Recognizes common multi-touch gestures like tap, swipe, pinch, and rotate out of the box, as listed in the key features, reducing boilerplate code.

Custom Gesture Flexibility

Allows defining and configuring custom gestures, such as tripletap with configurable taps, using the manager-based API shown in the README example.

Lightweight and Performant

Designed with minimal overhead for mobile web apps, ensuring fast gesture detection without significant performance hits on touch-enabled devices.

Quick Start API

Offers simple event subscriptions for common gestures, enabling rapid integration with just a few lines of code, as demonstrated in the quick start example.

Cons

No Built-in Visuals

Only handles gesture detection; developers must implement CSS or JavaScript separately for animations and visual feedback, adding development complexity.

Documentation Gaps

The README links to external documentation, and some example links (e.g., for pinch and rotate) are empty, indicating potential incomplete or outdated resources.

Complex Custom Setup

Defining custom gestures requires multiple steps with managers and recognizers, which can be cumbersome compared to simpler gesture libraries or native APIs.

Frequently Asked Questions

What is hammer.js?

Target Audience

Frontend developers building touch-enabled web applications, especially for mobile devices or interactive web interfaces.

Value Proposition

Developers choose Hammer.js for its simplicity, lightweight footprint, and flexibility in handling both built-in and custom gestures with a clean API.

Use Cases

Best For

Adding swipe navigation to mobile web apps
Implementing pinch-to-zoom in web-based image viewers
Creating interactive touch-based games for browsers
Building custom gesture controls for data visualization dashboards
Enhancing mobile web forms with gesture-based interactions
Developing touch-friendly UI components for cross-platform web applications

Not Ideal For

Applications built with modern frameworks like React or Vue that have integrated gesture libraries (e.g., Framer Motion, vue-touch)
Projects requiring out-of-the-box gesture animations and visual feedback, as Hammer.js only handles detection, not styling
High-performance gaming or VR applications needing low-latency, hardware-accelerated input handling beyond basic gestures
Accessibility-first projects where gesture support must be deeply integrated with keyboard navigation and ARIA roles without extra setup

Pros & Cons

Pros

Wide Gesture Support

Recognizes common multi-touch gestures like tap, swipe, pinch, and rotate out of the box, as listed in the key features, reducing boilerplate code.

Custom Gesture Flexibility

Allows defining and configuring custom gestures, such as tripletap with configurable taps, using the manager-based API shown in the README example.

Lightweight and Performant

Designed with minimal overhead for mobile web apps, ensuring fast gesture detection without significant performance hits on touch-enabled devices.

Quick Start API

Offers simple event subscriptions for common gestures, enabling rapid integration with just a few lines of code, as demonstrated in the quick start example.

Cons

No Built-in Visuals

Only handles gesture detection; developers must implement CSS or JavaScript separately for animations and visual feedback, adding development complexity.

Documentation Gaps

The README links to external documentation, and some example links (e.g., for pinch and rotate) are empty, indicating potential incomplete or outdated resources.

Complex Custom Setup

Defining custom gestures requires multiple steps with managers and recognizers, which can be cumbersome compared to simpler gesture libraries or native APIs.

Frequently Asked Questions

hammer.js

What is hammer.js?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Found a gem we're missing?

hammer.js

What is hammer.js?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Found a gem we're missing?