https://www.paycom.com/static/animationHelper.js

1function handleEvent() {
2  // IntersectionObserver to observe blocks with animation enter the viewport and start animation
3  const options = {
4    root: null, // viewport
5    rootMargin: "0px", // no margin
6    threshold: 0.5, // 50% of target visible
7  };
8
9  const callback = (entries, observer) => {
10    entries.forEach((entry) => {
11      const element = entry.target;
12      if (entry.isIntersecting) {
13        const animationClassName = element.dataset.animation;
14
15        // Trigger animation
16        element.classList.add(animationClassName);
17        element.classList.remove("hidden");
18
19        observer.unobserve(element);
20      }
21      element.parentElement.style.overflow = "hidden";
22    });
23  };
24
25  const observer = new IntersectionObserver(callback, options);
26
27  const elements = document.querySelectorAll(".animate__animated");
28  elements.forEach((element) => observer.observe(element));
29
30  // MutationObserver to watch for changes in DOM tree of CMS dropdowns and observe blocks with animation again
31  const dropdownCallback = (mutationsList, dropdownObserver) => {
32    mutationsList.forEach((mutation) => {
33      // Check if a child node (dropdown-card) has been added/removed, add animation
34      if (mutation.type === "childList") {
35        const dropdownElements =
36          document.querySelectorAll(".animate__animated");
37        dropdownElements.forEach((element) => observer.observe(element));
38      }
39    });
40  };
41
42  const dropdownObserver = new MutationObserver(dropdownCallback);
43
44  // Observe direct children of dropdown-container, which is dropdown-card
45  const dropdowns = document.querySelectorAll(".dropdown-container");
46  dropdowns.forEach((dropdown) =>
47    dropdownObserver.observe(dropdown, { childList: true }),
48  );
49}
50
51window.addEventListener("load", handleEvent);
52window.addEventListener("resize", handleEvent);
53window.addEventListener("scroll", handleEvent);