horizontal container scrolling (modified jump.js)

jump.js

// ease in out quad
const easing = (t, b, c, d) => {
  t /= d / 2
  if (t < 1) return c / 2 * t * t + b
  t--
  return -c / 2 * (t * (t - 2) - 1) + b
}

// modified jump.js
// stripped options, supports (only) scrolling a container horizontally
const jumper = () => {
  let cb

  let start
  let next
  let end

  let distance
  let duration

  let scroller

  let timeCurrent
  let timeElapsed
  let timeStart

  function horiz (target, from, to, options = {}) {
    // cache options
    cb = options.callback
    duration = options.duration || 1000
    end = to
    start = from
    scroller = target

    // determine scroll distance
    distance = to - from

    // start it up
    window.requestAnimationFrame(run)
  }

  function run (timeCurrent) {
    // store time scroll started, if not started already
    if (!timeStart) {
      timeStart = timeCurrent
    }

    // determine time spent scrolling so far
    timeElapsed = timeCurrent - timeStart

    // calculate next scroll position
    next = easing(timeElapsed, start, distance, duration)

    // scroll to it
    scroller.scrollLeft = next

    // check progress
    timeElapsed < duration
      ? window.requestAnimationFrame(run)
      : done()
  }

  function done () {
    // account for rAF time rounding inaccuracies
    scroller.scrollLeft = start + distance

    // fire callback
    if (typeof cb === 'function') {
      cb()
    }

    // reset for next jump
    timeStart = false
  }

  return horiz
}

// export singleton

const singleton = jumper()

export default singleton