Skip to content

Instantly share code, notes, and snippets.

@edwardsanchez
Created August 30, 2014 23:48
Show Gist options
  • Save edwardsanchez/99eff5c7a0928bff81b1 to your computer and use it in GitHub Desktop.
Save edwardsanchez/99eff5c7a0928bff81b1 to your computer and use it in GitHub Desktop.
Inertia with snap to multiple of a number
LayerWidth = 64
Dragger = new Layer width:LayerWidth*5, y:280, x:0, height: LayerWidth
Dragger.draggable.speedY = 0
Dragger.draggable.enabled = true
Dragger.on Events.DragEnd, ->
# These are two variables you can tweak for different effects
Sliding = true
constant1 = 1000
constant2 = 0
# Calculate the current dragging velocity and add x and y up
velocity = Dragger.draggable.calculateVelocity()
totalVelocity = Utils.pointTotal Utils.pointAbs velocity
Dragger.animate
properties:
#Snap Strip to a multiple of LayerWidth
x: Math.ceil((Dragger.x + (velocity.x * constant1))/LayerWidth)*LayerWidth
curve: "spring"
curveOptions:
friction: 100
tension: 80
velocity: totalVelocity * constant2
#markers to show snapping works
Marker1 = new Layer x: LayerWidth, y: 280, width: 2, height: 64, backgroundColor: "red"
Marker2 = new Layer x: LayerWidth*2, y: 280, width: 2, height: 64, backgroundColor: "white"
Marker3 = new Layer x: LayerWidth*3, y: 280, width: 2, height: 64, backgroundColor: "red"
Marker4 = new Layer x: LayerWidth*4, y: 280, width: 2, height: 64, backgroundColor: "white"
Marker5 = new Layer x: LayerWidth*5, y: 280, width: 2, height: 64, backgroundColor: "red"
Marker6 = new Layer x: LayerWidth*6, y: 280, width: 2, height: 64, backgroundColor: "white"
Marker7 = new Layer x: LayerWidth*7, y: 280, width: 2, height: 64, backgroundColor: "red"
Marker8 = new Layer x: LayerWidth*8, y: 280, width: 2, height: 64, backgroundColor: "white"
Marker9 = new Layer x: LayerWidth*9, y: 280, width: 2, height: 64, backgroundColor: "red"
Marker10 = new Layer x: LayerWidth*10, y: 280, width: 2, height: 64, backgroundColor: "white"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment