Flickity Marquee Scroll

flickityMarquee.js

function wrapper() {
  this.$row = ''; // gotta have a Flickity slider row
  this.scrollMultiplier = 0;

  function () {
    // needs $row first 
    const onEnter = (forward) => () => self.flickityRowScroll(type, fabric, forward);
    const onLeave = () => self.flickityRowStopScroll(type, fabric);

    const $leftTrig = $('.more-left', $row);
    const $rightTrig = $('.more-right', $row);

    const leftWidth = $leftTrig.width();
    const rightWidth = $rightTrig.width();

    $leftTrig.hover(onEnter(false), onLeave);
    $rightTrig.hover(onEnter(true), onLeave);

    $leftTrig.mousemove((event) => {
      self.scrollMultiplier = 1 - (event.pageX / leftWidth);
    });

    $rightTrig.mousemove((event) => {
      self.scrollMultiplier = 1 - ((window.innerWidth - event.pageX) / rightWidth);
    });
  };


  flickityRowScroll = (type, fabric, forward) => {
    const rowId = `${type}${fabric}`;
    const flick = this.flickityRows[rowId];

    const self = this;
    // let frame = 0;
    // const fullSpeedAtFrame = 60;

    function play() {
      const farthestLeft = !forward && (flick.x >= 0);
      const farthestRight = forward && (flick.x <= -flick.slidesWidth);
      if (farthestRight || farthestLeft) {
        self.scrollRequests[rowId] = null;
        return;
      }

      if (self.cancelAnimationFrame) {
        window.cancelAnimationFrame(self.scrollRequests[rowId]);
        self.scrollRequests[rowId] = null;

        setTimeout(() => {
          self.cancelAnimationFrame = false;
        }, 100);
      }

      // if (frame < fullSpeedAtFrame) frame++; // eslint-disable-line curly
      // const startUpMuliplier = frame / fullSpeedAtFrame;
      // const multiplier = startUpMuliplier

      const multiplier = self.scrollMultiplier;

      // let scrollDelta = Math.min(window.innerWidth * 0.005, 7.5);
      // let scrollDelta = Math.min(window.innerWidth * 0.0075, 11.25);
      let scrollDelta = Math.min(window.innerWidth * 0.01, 15);
      if (forward) scrollDelta *= -1; // eslint-disable-line curly
      scrollDelta *= multiplier;

      flick.x += scrollDelta;
      flick.settle(flick.x);

      // Set the requestId to the local variable
      self.scrollRequests[rowId] = window.requestAnimationFrame(play);
    }

    window.requestAnimationFrame(play);
  };

  flickityRowStopScroll = (type, fabric) => {
    const rowId = `${type}${fabric}`;
    window.cancelAnimationFrame(this.scrollRequests[rowId]);
    this.cancelAnimationFrame = true;
    this.scrollRequests[rowId] = null;
  };
};