https://www.hubspire.com/wp-content/themes/hubspire-2026/js/fade-up.js

1
2document.addEventListener("DOMContentLoaded", function () {
3  const elements = document.querySelectorAll(".fade-effect");
4
5  if (!elements.length) return;
6
7  const observer = new IntersectionObserver(
8    (entries, obs) => {
9      entries.forEach((entry) => {
10        if (!entry.isIntersecting) return;
11
12        const el = entry.target;
13        const delay = parseInt(el.getAttribute("data-delay"), 10) || 0;
14
15        setTimeout(() => {
16          el.classList.add("is-visible");
17        }, delay);
18
19        // Remove this line if you want the animation to happen every time
20        obs.unobserve(el);
21      });
22    },
23    {
24      // Previous settings kept for reference:
25      // threshold: 0.15,
26      // rootMargin: "0px 0px -10% 0px"
27      //
28      // Fix: trigger fade visibility as soon as the element enters the viewport.
29      // This ensures any in-viewport `.fade-effect` item is visible without requiring scroll.
30      threshold: 0.01,
31      rootMargin: "0px 0px -3% 0px"
32    }
33  );
34
35  elements.forEach((el) => observer.observe(el));
36});