apple-like-fluid-ui-animation.js

// Velocity based projection of position on 
// UI with a fixed set of position a draggable element can take:
// for instance a grid where you can drag and drop items

const position = {
  x: {value, 10, velocity: 2 },
  y: {value 10, velocity: 7 }
}

// 1. calculate the final position of your item in function of the momentum it has

const project = (velocity, descelerationRate) => 
  (velocity / 1000) * descelerationRate / (1 - descelerationRate)
  

const getProjection = x => x.value + project(x.velocity, .1)

const projectedPosition = {
  x: getProjection(position.x),
  y: getProjection(position.y)
}

// 2. get the closest position it could have in the set of position available
// from the finalPosition

const nextPosition = getClosestPosition(projectedPosition)

// 3. apply stiffness and damping easing to it

Observable.of(position, nextPosition) |> switchMap(ease(120, 20))