scrollTo.js

/* eslint-disable no-param-reassign */
import raf from 'rafl';
import { Tween, Easing } from '@tweenjs/tween.js';

function noop() {}

export default function scrollTo(element, options) {
  let { duration, onComplete } = options;
  const { left, top } = options;

  onComplete = onComplete || noop;
  duration = duration || 500;

  if (!left && !top) {
    return;
  }

  const to = {};
  const coords = {};
  if (left) {
    to.left = left;
    coords.left = element.scrollLeft;
  }
  if (top) {
    to.top = top;
    coords.top = element.scrollTop;
  }

  const tween = new Tween(coords);

  let animate = (time) => {
    raf(animate);
    tween.update(time);
  };

  tween
    .to(to, duration)
    .easing(Easing.Quadratic.Out)
    .onUpdate(() => {
      element.scrollTop = coords.top;
    })
    .onComplete(() => {
      console.log('complete');
      animate = () => {};
      onComplete();
    })
    .start();

  raf(animate);
}