-
-
Save jamespantalones/ccbea3dff632ab4f0099de117e945697 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment