motion-scroll/lib/index.js

scroll to an element or a position with easing

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var MotionScroll = {
  scroll: function scroll() {
    var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    var _config$element = config.element,
        element = _config$element === void 0 ? window : _config$element,
        _config$axis = config.axis,
        axis = _config$axis === void 0 ? 'y' : _config$axis,
        _config$scrollTo = config.scrollTo,
        scrollTo = _config$scrollTo === void 0 ? 0 : _config$scrollTo,
        _config$speed = config.speed,
        speed = _config$speed === void 0 ? 2000 : _config$speed,
        _config$easing = config.easing,
        easing = _config$easing === void 0 ? null : _config$easing,
        _config$callBack = config.callBack,
        callBack = _config$callBack === void 0 ? null : _config$callBack,
        _config$delay = config.delay,
        delay = _config$delay === void 0 ? 0 : _config$delay,
        _config$force = config.force,
        force = _config$force === void 0 ? false : _config$force,
        _config$minScrollTime = config.minScrollTime,
        minScrollTime = _config$minScrollTime === void 0 ? 0 : _config$minScrollTime,
        _config$maxScrollTime = config.maxScrollTime,
        maxScrollTime = _config$maxScrollTime === void 0 ? 10 : _config$maxScrollTime;
    var isYAxis = axis === 'y';
    var dir = isYAxis ? 'top' : 'left';
    scrollTo = typeof scrollTo === 'number' ? scrollTo : scrollTo.getBoundingClientRect()[dir] - element.getBoundingClientRect()[dir] + element["scroll".concat(dir[0].toUpperCase() + dir.slice(1))];
    var scrollCancelled = false;
    var scrollPositions = element === window ? [element.scrollX, element.scrollY] : [element.scrollLeft, element.scrollTop];

    var _ref = isYAxis ? scrollPositions.reverse() : scrollPositions,
        _ref2 = _slicedToArray(_ref, 2),
        scrollFrom = _ref2[0],
        altAxisPos = _ref2[1];

    var currentTime = 0;
    var time = Math.max(minScrollTime, Math.min(Math.abs(scrollFrom - scrollTo) / speed, maxScrollTime)); // animation loop

    function tick() {
      currentTime += 1 / 60;
      var pos = currentTime / time; // values from 0 to 1

      var easingPos = easing !== null ? easing(pos) : pos; // altered pos value

      var finished = pos >= 1;
      var scrollPos = [altAxisPos, finished ? scrollTo : scrollFrom + (scrollTo - scrollFrom) * easingPos];

      var _ref3 = isYAxis ? scrollPos : scrollPos.reverse(),
          _ref4 = _slicedToArray(_ref3, 2),
          scrollX = _ref4[0],
          scrollY = _ref4[1];

      element.scrollTo(scrollX, scrollY);

      if (finished) {
        cancelScroll();

        if (callBack !== null) {
          callBack();
        }
      } else if (!scrollCancelled || force) {
        window.requestAnimationFrame(tick);
      }
    }

    window.setTimeout(function () {
      // call it once to get started
      tick();
    }, delay * 1000);

    function cancelScroll() {
      scrollCancelled = true;
      window.removeEventListener('mousewheel', cancelScroll);
    }

    window.addEventListener('mousewheel', cancelScroll);
  }
};
var _default = MotionScroll;
exports.default = _default;