jakiestfu/snap.js

Snap.js is a JavaScript library for creating side-drawer navigation on mobile web pages. This pattern, sometimes called a shelf or side menu, is the kind that slides the main content sideways to reveal a hidden panel on the left or right. It was popularized by mobile apps like Facebook and Path. The library works without any other JavaScript framework, so it can be dropped into any project. It handles all touch interaction on mobile devices, including detecting swipe gestures, responding to flick motions, and figuring out whether the user intends to scroll the page vertically or slide the drawer open sideways. Opening and closing animations run through CSS3 transitions for smooth performance, with fallbacks for older Internet Explorer versions. To set it up, a developer creates a new Snap instance and points it at the main content element on the page. A range of settings controls how far the pane slides, how fast the animation runs, whether tapping an open pane closes it, and whether touch dragging is enabled at all. Both left and right drawers are supported, and either side can be disabled independently. A drag handle element can also be designated so only a specific area of the screen initiates the slide. Snap.js exposes a JavaScript API for controlling the drawer from code: opening to a specific side, closing, or expanding fully. It fires events at each stage of interaction, such as when dragging starts, during movement, and when animation finishes. These event hooks allow responding to the menu's state changes from other parts of the page. The library supports a wide range of browsers, including Firefox, WebKit-based browsers on older Android devices (2.3.x), and Internet Explorer from version 7 onward, with full transition support starting at version 10.