app/javascript/themes/glitch/util/scroll.js

   1 const easingOutQuint = (x, t, b, c, d) => c * ((t = t / d - 1) * t * t * t * t + 1) + b;
   2
   3 const scroll = (node, key, target) => {
   4   const startTime = Date.now();
   5   const offset    = node[key];
   6   const gap       = target - offset;
   7   const duration  = 1000;
   8   let interrupt   = false;
   9
  10   const step = () => {
  11     const elapsed    = Date.now() - startTime;
  12     const percentage = elapsed / duration;
  13
  14     if (percentage > 1 || interrupt) {
  15       return;
  16     }
  17
  18     node[key] = easingOutQuint(0, elapsed, offset, gap, duration);
  19     requestAnimationFrame(step);
  20   };
  21
  22   step();
  23
  24   return () => {
  25     interrupt = true;
  26   };
  27 };
  28
  29 export const scrollRight = (node, position) => scroll(node, 'scrollLeft', position);
  30 export const scrollTop = (node) => scroll(node, 'scrollTop', 0);