Skip to content

Instantly share code, notes, and snippets.

@tancredi
Forked from dezinezync/scroll.easing.js
Last active December 26, 2015 23:59
Show Gist options
  • Save tancredi/7234273 to your computer and use it in GitHub Desktop.
Save tancredi/7234273 to your computer and use it in GitHub Desktop.
(function () {
var requestAnimFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000 / 60);
},
easing = {
linear: function (t) { return t; },
easeInQuad: function (t) { return t * t; },
easeOutQuad: function (t) { return t * (2 - t); },
easeInOutQuad: function (t) { return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; },
easeInCubic: function (t) { return t * t * t; },
easeOutCubic: function (t) { return (--t) * t * t + 1; },
easeInOutCubic: function (t) { return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1; },
easeInQuart: function (t) { return t * t * t * t; },
easeOutQuart: function (t) { return 1 - (--t) * t * t * t; },
easeInOutQuart: function (t) { return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t; },
easeInQuint: function (t) { return t * t * t * t * t; },
easeOutQuint: function (t) { return 1 + (--t) * t * t * t * t; },
easeInOutQuint: function (t) { return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t; }
},
stopped = false,
animating = false;
window.animateScrollTo = function (Y, duration, easingKey, callback) {
var start = Date.now(),
elem = (typeof document.documentElement.scrollTop !== 'undefined') ? document.documentElement : document.body,
from = elem.scrollTop;
if (from === Y && callback) {
callback();
return; /* Prevent scrolling to the Y point if already there */
}
function min (a, b) {
return a < b ? a : b;
}
function scroll () {
var currentTime = Date.now(),
time = min(1, ((currentTime - start) / duration)),
eeasedT = (easing[easingKey] || easing.linear)(time);
if (stopped) {
stopped = false;
return;
}
animating = true;
elem.scrollTop = (easedT * (Y - from)) + from;
if (time < 1) {
requestAnimFrame(scroll);
} else if (callback) {
callback();
}
}
requestAnimFrame(scroll);
};
window.stopScrollTo = function () {
stopped = true;
};
}());
window.addEventListener('load', function () {
animateScrollTo(1000, 3000, 'easeOutQuart');
setTimeout(function () {
stopScrollTo();
animateScrollTo(0, 3000, 'easeInOutQuart');
}, 500);
});
@2kool2
Copy link

2kool2 commented Dec 14, 2013

Beautifully coded, but contains an error and a mistype.

elem = (typeof document.documentElement.scrollTop !== 'undefined') ? document.documentElement : document.body,

Failed in at least Chrome on a Mac though I don't know why as typeof document.documentElement.scrollTop equals number.
Replacing with the original:

elem = document.documentElement.scrollTop ? document.documentElement : document.body,

Only works in non IE - rubbish.

Typo line 46: eeasedT

Currently working on a solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment