animated scroll… (turn this into a library)

scroll-to.js

var raf = require('raf')

// https://gist.github.com/dezinezync/5487119
var easingFn = {
  // no easing, no acceleration
  linear: function (t) { return t },
  // accelerating from zero velocity
  easeInQuad: function (t) { return t * t },
  // decelerating to zero velocity
  easeOutQuad: function (t) { return t * (2 - t) },
  // acceleration until halfway, then deceleration
  easeInOutQuad: function (t) { return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t },
  // accelerating from zero velocity
  easeInCubic: function (t) { return t * t * t },
  // decelerating to zero velocity
  easeOutCubic: function (t) { return (--t) * t * t + 1 },
  // acceleration until halfway, then deceleration
  easeInOutCubic: function (t) { return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1 },
  // accelerating from zero velocity
  easeInQuart: function (t) { return t * t * t * t },
  // decelerating to zero velocity
  easeOutQuart: function (t) { return 1 - (--t) * t * t * t },
  // acceleration until halfway, then deceleration
  easeInOutQuart: function (t) { return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t },
  // accelerating from zero velocity
  easeInQuint: function (t) { return t * t * t * t * t },
  // decelerating to zero velocity
  easeOutQuint: function (t) { return 1 + (--t) * t * t * t * t },
  // acceleration until halfway, then deceleration
  easeInOutQuint: function (t) { return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t }
}

module.exports = Scroll

function Scroll (el, duration, easing) {
  if (!(this instanceof Scroll)) return new Scroll(el, duration, easing)

  if (!el) {
    this.el = document.documentElement.scrollTop
      ? document.documentElement
      : document.body
    this.container = window
  } else {
    this.el = this.container = el
  }

  this.duration = duration || 500
  this.easing = easing || 'easeOutQuad'
}

// TODO add x value

Scroll.prototype.to = function to (x, y, duration, easing, callback) {
  var self = this
  var start = Date.now()
  var startOffset = self.el.scrollTop

  duration = duration || self.duration
  easing = easing || self.easing
  callback = callback || arguments[arguments.length - 1]
  callback = typeof callback === 'function' ? callback : noop

  var ease = (typeof easing === 'function') ? easing : easingFn[easing]

  if (y === startOffset) {
    return
  }

  function scroll (timestamp) {
    var currentTime = Date.now()
    var time = Math.min(1, ((currentTime - start) / duration))
    var easedTime = ease(time)
    var value = (easedTime * (y - startOffset)) + startOffset

    self.container.scrollTo(0, Math.floor(value))

    if (time < 1) {
      raf(scroll)
    } else {
      callback()
    }
  }

  raf(scroll)
}

function noop () {}