Video scrubbing based on scroll with easing effect
Switch branches/tags
Clone or download
Latest commit 0f7b996 Jun 27, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist code style update Jun 26, 2017
src code style update Jun 26, 2017
test added example of two instances Jun 26, 2017
.gitignore no message Feb 27, 2015 finish 1.1 Mar 2, 2015
gulpfile.js finish 1.1 Mar 2, 2015
package.json bugfix Mar 2, 2015
yarn.lock code style update Jun 26, 2017


Video scrubbing on scroll with easing using no dependencies.



npm install video-scroller



Normal use:

<video src="video.mp4">

Using XHR to blob for performance

<video data-src="video.mp4">


new VideoScroller({
    el: document.getElementById('myVideoElement')


Property Type Text Default
el element video element
invert bool reverses playback directions / scroll direction false
scrollTimeout number how often new position is calculated when scrolling in milliseconds 300
easingFunction string / function custom easing function, using only one parameter [0-1] and returning [0-1] easeOutQuint

Easing functions

See [EasingFunctions.js] (

Video requirements

To get the video to scroll smoothly it has to have a generous number of keyframes, here is how you would do that using ffmpeg

ffmpeg -i input.mp4 -g 10 output.mp4


  • 1.1.0
    • Added XHR to blog option to get rid of "206 Partal Content" requests.
    • Easingfunction option can now be a string.
  • 1.0.3
    • Changed code from ES5 to ES6 using babel.
  • 1.0.2
  • 1.0.1
  • 1.0.0