momentum.js

momenutm.js is a small (plainly written) JavaScript plugin, giving you the ability to add a "throw momentum effect" to anything displayed on your webpage. It can be a handy alternative to the Draggable extension of the greensock animation framework. Besides desktop devices it also works for mobile and touch devices.

Installation

To use momentum.js you have to include the momentum.js file from the dist folder. If your server supports serving compressed files you can also put the compressed gz file in the same directory as the js file. This improves the loading time by more than 50%. It also comes as a npm module:

npm install --save momentum.js

Usage

You can use this package by simply including it like this:

import { Draggable, Handler, Rotatable } from 'momentum.js';

How to use the Draggable

The Draggable component allows your elements to be dragged around.

new momentum.Draggable(element, config);

This example shows how to create a basic draggable element:

new momentum.Draggable(dragElement, {
  container: containerElement,
  containerBounds: true,
  resizeUpdate: true,
  autoAnchor: true
});

Some Draggable Demos

http://momentum.davide-perozzi.de/

The Draggable configuration

| Option | Type | Default | Description | | ------------- | ------------- | ------------- | ------------- | | container | Element | null | Container of the draggable element. Also the target for the "drag events" | | elementBounds | Element|string | null | Determines if the bounds of a element should be used. As a shortcut you can pass 'container' or 'parent' as a string | | bounds | Object | null | Set the bounds manually {x: number y: number, width: number, height: number} | | autoAnchor | boolean | false | Determines if the anchor should be set on the start position the user has clicked | | anchorX | number | 0.5 | The anchor point on the horizontal axis. | | anchorY | number | 0.5 | The anchor point on the vertical axis. | | threshold | number| 5 | The minimum velocity the element needs to reach to trigger the throw animation | | restitution | number | 0 | The bounciness of the element if it hits the bounds. This will be multiplicated with the velocity. You can use negative values to let the element bounce out of the bounds. Numbers from -1 to 1 are valid. | friction | number | 0.035 | The friction of the element. Lower values make the elements decelerate longer. Numbers from 0 to 1 are valid | | offsetFriction | number | 0.1 | The friction used out of bounds. This will be included in the calculations if you used a negative restitution. Numbers from 0 to 1 are valid | | maxVelocity | number | 70 | The maximum velocity the element can reach. Numbers greater than 0 are valid. | | resizeUpdate | boolean | false | Determines whether the draggable should be updated automatically after the browser is resized. | | lockAxis | Object | null | Locked axis will be excluded from the translation. For example: {x: false, y: true}. This will lock the y axis. | | onUp | Function | null | Callback which will be called if the user released the element. | | onDown | Function | null | Callback which will be called if the user hits the element before the drag. Whether you return true or false determimes if the drag will be accepted. If you want to preserve the default behaviour you should return the "hit" parameter. Parameter list: hit, cursorX, cursorY, elementX, elementY, elementWidth, elementHeight | | onMove | Function | null | This will be triggered before the element is going to be moved. At this point the element does not have the latest translation. You can return an coordinate object like "{x: number, y: number}" to manipulate the position of the element. Parameter list: posX, posY, velX, velY. | | onTranslate | Function | null | This will be called if the translation settled. Parameter list: elementX, elementY, elementWidth, elementHeight, elementBounds | | preventMove | Function | null | A function which needs to return wheter true or false to prevent the movement. This can be useful to add a move threshold. Paramter list: movedX, movedY, isTouchDevice

License

momentum.js is open-sourced software licensed under the MIT license.