jakiestfu/Snap.js
Snap.js
Snap.js is a JavaScript library for building draggable side navigation panels on touch devices. It enables slide-in menus from the left or right screen edge, driven by a gesture-based state machine that interprets drag and flick gestures to open and close the panel.
The library distinguishes horizontal menu drags from vertical scrolling by analyzing the initial touch movement angle, and locks menu movement to a single axis to prevent interference. It uses hardware-accelerated CSS transforms for smooth animations and provides configurable snap thresholds that determine whether a drag should open or close the menu based on release distance. Event listeners are attached to the document body, with support for excluding specific child elements from triggering the menu.
Snap.js exposes a programmatic toggle API for opening or closing menus without gesture input, along with lifecycle callbacks that fire at drag start, open, close, and animation completion. It also supports custom CSS class application, drag direction restriction, and real-time querying of the menu's position and open percentage.
Features
- Side Menu Frameworks - Opens a navigation panel from the screen edge using drag and flick gestures for mobile interaction.
- Gesture Menus - Detects drag and flick gestures to open and close mobile navigation panels with configurable sensitivity.
- Gesture State Machines - Manages menu open/close states by tracking drag gestures and snapping to predefined positions.
- Touch Drag Intent Detections - Determines whether a touch drag should open the side menu or scroll the page.
- CSS Transform Animations - Animates menu sliding using hardware-accelerated CSS transforms for smooth mobile performance.
- Side Menu Visibility Toggles - Switches the side menu between open and closed states using a programmatic call or a gesture.
- Snap Thresholds - Uses configurable pixel thresholds to decide whether a drag should snap the menu open or closed.
- Draggable Panels - Builds user interface panels that can be dragged open or closed with customizable thresholds and directional restrictions.
- Drag Thresholds - Configures the minimum drag distance required to trigger the menu to snap open or closed.
- Draggable Axis Constraints - Locks menu movement to the horizontal axis, preventing vertical interference during drags.
- Programmatic Menu Toggles - Opens or closes a specified side menu programmatically with custom buttons or triggers.
- Slide-Out Panels - Lets users slide a navigation panel into view by dragging the main content area on touch devices.
- Touch Gesture Detection - Detects and interprets touch drags, flicks, and angles to determine user intent for opening or closing interface elements.
- Touch Angle Disambiguation - Determines user intent by calculating the initial touch movement angle to distinguish horizontal menu drags from vertical scrolls.
- Menu State Toggles - Exposes open/close methods that bypass gesture detection for external controls.
- Drag Exclusion Elements - Prevents the menu from opening when users interact with designated child elements like sliders or forms.
- Lifecycle Callbacks - Fires user-defined callbacks at drag start, open, close, and animation completion.
- Menu Lifecycle Callbacks - Fires callbacks when dragging starts, the menu opens, or an animation completes.
- Drag Direction Restrictions - Limits menu dragging to one specific side or disables it entirely to control how the panel is revealed.
- Mobile Animation Libraries - Adds smooth slide animations and snap behaviors to mobile interface elements triggered by touch gestures.
- Expandable Menu Contents - Displays additional content like nested navigation links or extra options inside the side panel.
- Lifecycle Callbacks - Manages side menu states and events including open, close, drag start, and animation completion with callback hooks.
Star history
How this analysis was created: This summary and feature list were written by an AI model that read the project's README and public documentation pages. Each feature links to the documentation it came from; stars, license and language come straight from the GitHub API. The model does not read the source code, and the analysis is refreshed when the project is re-analysed. Learn more on our About page.
