Smooth scrolling

scroll

const easeModifier = (t) => {
  return t > 0.5 ? 4 * Math.pow(t - 1, 3) + 1 : 4 * Math.pow(t, 3);
}

const createPositionsArray = (numFrames, totalDistance, pagePosition) => {
  return new Array(numFrames + 1).fill(null).map((x, i) => {
    const progress = i / numFrames;
    const incrementDistance = easeModifier(progress) * totalDistance;

    return pagePosition + (incrementDistance);
  })
}

const recurser = (positions) => {
  if (positions.length) {
    const [position, ...rest] = positions;
    window.scrollTo(0, position);
    requestAnimationFrame(() => {recurser(rest)})
  }
}

function scrollToElement ({ element, offset = 0, duration = 300 }) {
  const pagePosition =  window.pageYOffset;
  const elementOffset = element.getBoundingClientRect().top;
  const totalDistance = elementOffset + offset;
  const numFrames = Math.ceil(duration / 16.6);
  const positions = createPositionsArray(numFrames, totalDistance, pagePosition)
  
  recurser(positions);
}

export default scrollToElement;