Micro library to animate elements with CSS based on scroll position

nifty-animate.beta.js

/* 
* Nifty Animate
* Micro library to animate elements with CSS based on scroll position
* Requires: Lodash throttle & debounce
* Author: Franco Moya - @iamravenous
* Version: 1.1 Beta
*/

const offset = el => {
  const rect = el.getBoundingClientRect();

  return { 
    top: rect.top + window.scrollY, 
    left: rect.left + window.scrollX 
  };
};

const niftyAnimate = () => {
  let animatedElements = document.querySelectorAll("[data-animate]");
  let scrollPos = window.pageYOffset;
  let windowHeight = window.innerHeight;
  let windowBottomPos = scrollPos + windowHeight;

  animatedElements.forEach(el => {
    const elementHeight = el.offsetHeight;
    const elementTopPos = offset(el).top;
    const elementBottomPos = elementTopPos + elementHeight;

    if (elementBottomPos >= scrollPos && elementTopPos <= windowBottomPos) {
      el.setAttribute("data-animate", "true");
    }
  });
};

niftyAnimate();

window.addEventListener(
  "resize", 
  _.debounce(niftyAnimate, 50, true));

window.addEventListener(
  "orientationchange",
  _.debounce(niftyAnimate, 50, true)
);

window.addEventListener(
  "scroll",
  _.throttle(function() {
    niftyAnimate();
  }, 99)
);