ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-11-15 04:35:57 +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
*
* @see http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html
*/
const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
const DURATION = 500;
const TIME_CONSTANT = 100;
export default function scrollTo(y) {
const start = Date.now();
const {scrollTop} = document.body;
const delta = y - scrollTop;
const amplitude = y - scrollTop;
requestAnimationFrame(function animateScroll() {
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);
} else {
interpolatedY = y;
delta = 0;
}
window.scrollTo(0, interpolatedY);
window.scrollTo(0, y + delta);
});
}