Xnap

Components that snap.

Demo

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.