Components that snap.
https://memeone.github.io/xnap/
npm i --save xnap
For a full example, check out /example.
Here's a simple example that snaps between transformX(-100%) and transformX(100%).
let xnapCard = new Xnap(component, { states: ['-100% + ', '100% + '], direction: 0 })
xnapCard.register() // Register the event listeners.new Xnap(component, { options })| Name | Type | Default | Description |
|---|---|---|---|
| exact | Boolean | false | If dragging should only be triggered when you touch the component xnap was mounted on. |
| state | Boolean | false | Which state the component is initiated with. |
| states | String Array | ['0% + ', '100% + '] | What the transforms are for the states. Movement is appended to the current string. |
| scaleStates | Number Array | [1.0, 1.0] | What the scales are for the states. |
| factor | Number | 5 | How snappy it is. Higher = Snappier. |
| length | Number | 100 | How far it needs to be dragged before it snaps. |
| onTrue | Function | None | Function that triggers when state is set to true. |
| onFalse | Function | None | Function that triggers when state is set to false. |
| condition | Function | () => true | Runs on mouse/touch down, if false return: don't trigger moving. |
| direction | Number | 1 | Which direction it moves. 0 = Left/Right. 1 = Up/Down. |
| vibrate | Number | None | If a number is given, it vibrates the device on state change for the given duration in MS. Use 2 - 5 for a clicky tap. |