determine current scroll progress of an element

createScrollFrame.js

function createScrollFrame({
  scrollPosition = window.pageYOffset,
  triggerSize = window.innerHeight,
  triggerOrigin = 0,
  startElement,
  startOrigin = 0,
  startOffset = 0,
  endElement,
  endOrigin = 1,
  endOffset = 0,
  debug = false
}) {
  const startRect = startElement.getBoundingClientRect();
  const endRect = endElement ? endElement.getBoundingClientRect() : startRect;
  const startPosition =
    startRect.top +
    startRect.height * startOrigin +
    startOffset +
    scrollPosition;
  const endPosition =
    endRect.top + endRect.height * endOrigin + endOffset + scrollPosition;
  const trigger = scrollPosition + triggerSize * triggerOrigin;
  return {
    startPosition,
    endPosition,
    startDifference: startRect.top - endRect.top,
    endDifference: startRect.bottom - endRect.bottom,
    progress: (trigger - startPosition) / (endPosition - startPosition)
  };
}