marquee.js

const prefix = require('vendor-prefix')
import Tweezer from 'tweezer.js'

var transformPrefix = prefix('transform')

var linear = function (t, b, c, d) {
  return c*t/d + b;
}

module.exports = function (el) {

  var translateValue = 0
  var translateMax = 0
  var marqueeTween = null
  var duration = 50000

  function init () {
    el.appendChild(el.firstChild.cloneNode(true))
    onResize()
  }

  function addEvents () {
    window.addEventListener('resize', onResize)
  }

  function removeEvents () {
    window.removeEventListener('resize', onResize)
  }

  function onResize () {
    translateMax = el.firstChild.offsetWidth
  }

  function animate () {
    return new Tweezer({
      start : 0,
      end : translateMax,
      duration: duration,
      easing: linear
    })
    .on('tick', v => {
      translateValue = -v
      render()
    })
    .on('done', animate)
    .begin()
  }

  function start () {
    marqueeTween = animate()
    addEvents()
  }

  function stop () {
    if (marqueeTween) {
      marqueeTween.stop()
    }
    removeEvents()
  }

  function render () {
    el.style[transformPrefix] = `translateX(${translateValue}px)`
  }

  return {
    init  : init,
    start : start,
    stop  : stop
  }

}

pseudo-usage.js

const marquee = require('./marquee')

var butter = marquee(document.querySelector('[data-marquee]'))

// init sets up marquee content by duplicating child element for seamless loop
// some css is assumed, like nowrap white space and display inline on the childs.
butter.init()

// play it
butter.start()