https://www.cleanup.org.au/wp-content/themes/cua/assets/js/animation.js?ver=1790913019

1console.log("animation");
2
3const initHeaderHeight = () => {
4  const header = document.querySelector(".header-bottom");
5  if (!header) return;
6
7  const resizeHandler = () => {
8    const adminBarOffset =
9      document.querySelector("#wpadminbar")?.offsetHeight || 0;
10    window.headerOffset = header.offsetHeight + adminBarOffset;
11    document.body.style.setProperty("--offset", window.headerOffset + "px");
12  };
13
14  resizeHandler();
15  window.addEventListener("resize", (e) => resizeHandler);
16};
17
18const initScrollAnimate = () => {
19  gsap.registerPlugin(ScrollTrigger);
20  let trigger;
21  const resizeHandler = () => {
22    const holders = document.querySelectorAll(".animate-block");
23    if (!holders.length) return;
24    holders.forEach((holder) => {
25      if (trigger) trigger.scrollTrigger.kill();
26      const wrap = holder.querySelector(".animate-wrap");
27      const item = holder.querySelector(".animate-item");
28      const container = document.querySelector(".container");
29      const totalScrollWidth = wrap.scrollWidth + 50 - container.clientWidth;
30      trigger = gsap.to(wrap, {
31        x: () => -totalScrollWidth,
32        ease: "none",
33        scrollTrigger: {
34          trigger: holder,
35          start: "top top",
36          end: () => "+=" + totalScrollWidth,
37          scrub: true,
38          markers: false,
39          pin: true,
40          anticipatePin: 1,
41        },
42      });
43      ScrollTrigger.refresh();
44    });
45  };
46
47  resizeHandler();
48  let resizeTimeout;
49  window.addEventListener("resize", () => {
50    clearTimeout(resizeTimeout);
51    resizeTimeout = setTimeout(() => {
52      resizeHandler();
53    }, 250);
54  });
55};
56
57const initStackAnimation = () => {
58  const holders = document.querySelectorAll(".step-lists");
59  if (!holders.length) return;
60  holders.forEach((holder) => {
61    const items = holder.querySelectorAll(".step-list");
62    items.forEach((item, i) => {
63      if (i == items.length - 1) return;
64      let tl = gsap.timeline({
65        scrollTrigger: {
66          trigger: item,
67          pin: false,
68          markers: false,
69          start: `top top+=${window.headerOffset + 20}`,
70          end: `bottom top+=${window.headerOffset + 20}`,
71          scrub: 1,
72          onUpdate: (self) => {
73            item.style.setProperty("--progress", self.progress);
74          },
75        },
76      });
77    });
78  });
79};
80
81const initTooltip = () => {
82  const tooltips = document.querySelectorAll("[data-tooltip-wrap]");
83  if (!tooltips.length) return;
84  var isTouchDevice =
85    /MSIE 10.*Touch/.test(navigator.userAgent) ||
86    "ontouchstart" in window ||
87    (window.DocumentTouch && document instanceof DocumentTouch);
88  tooltips.forEach((tooltip) => {
89    const container = tooltip.querySelector("[data-tooltip]");
90    const content = tooltip.querySelector("[data-tooltip-content]");
91    container.addEventListener("mouseenter", () => {
92      if (isTouchDevice) return;
93      container.classList.add("visible");
94    });
95
96    container.addEventListener("mouseleave", () => {
97      container.classList.remove("visible");
98    });
99
100    tooltip.addEventListener("mousemove", (e) => {
101      const rect = tooltip.getBoundingClientRect();
102      const offsetX = e.clientX - rect.left;
103      const offsetY = e.clientY - rect.top;
104      content.style.setProperty("--x", offsetX + "px");
105      content.style.setProperty("--y", offsetY + "px");
106    });
107  });
108};
109
110window.addEventListener("DOMContentLoaded", (e) => {
111  initHeaderHeight();
112  initScrollAnimate();
113  initStackAnimation();
114  initTooltip();
115});