ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-07-05 06:20:09 +05:30
Code Issues Packages Projects Releases Wiki Activity

#131: easing for scroll animation

Browse Source
This commit is contained in:
SleepWalker 2016-06-04 10:26:54 +03:00
parent 23ed66d844
commit f22ae1ba54
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ui/scrollTo.js
View File

@ -1,28 +1,30 @@
/** /**
* Implements scroll to animation with momentum effect * Implements scroll to animation with momentum effect
*
* @see http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html
*/ */
const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
const DURATION = 500; const TIME_CONSTANT = 100;
export default function scrollTo(y) { export default function scrollTo(y) {
const start = Date.now(); const start = Date.now();
const {scrollTop} = document.body; const {scrollTop} = document.body;
const delta = y - scrollTop; const amplitude = y - scrollTop;
requestAnimationFrame(function animateScroll() { requestAnimationFrame(function animateScroll() {
const elapsed = Date.now() - start; const elapsed = Date.now() - start;
let interpolatedY = scrollTop + delta * (elapsed / DURATION); let delta = -amplitude * Math.exp(-elapsed / TIME_CONSTANT);
if (interpolatedY < y) { if (Math.abs(delta) > 0.5) {
requestAnimationFrame(animateScroll); requestAnimationFrame(animateScroll);
} else { } else {
interpolatedY = y; delta = 0;
} }
window.scrollTo(0, interpolatedY); window.scrollTo(0, y + delta);
}); });
} }