/*
Use Element.getBoundingClientRect() and the window.inner(Width|Height) values to determine if a given
element is visible in the viewport.
Omit the second argument to determine if the element is entirely visible,
or specify true to determine if it is partially visible.
*/
const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
const { top, left, bottom, right } = el.getBoundingClientRect();
const { innerHeight, innerWidth } = window;
return partiallyVisible
? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};