https://www.discourse.org/a/js/enterprise-screenshots-animation.js?1790174693181339485

1document.addEventListener("DOMContentLoaded", function () {
2  const SCREENSHOT_INTERVAL = 4000;
3
4  const screenshotsContainer = document.querySelector(
5    ".enterprise-section__screenshots"
6  );
7  const screenshots = document.querySelectorAll(
8    ".enterprise-section__screenshot"
9  );
10  const logos = document.querySelectorAll(".enterprise-section__logo-item");
11
12  if (!screenshotsContainer || screenshots.length === 0) {
13    return;
14  }
15
16  const screenshotOrder = ["epic", "asana", "cloudflare", "monzo"];
17  let currentIndex = 0;
18  let intervalId = null;
19
20  screenshots.forEach((screenshot) => {
21    screenshot.classList.remove("is-active");
22  });
23
24  logos.forEach((logo) => {
25    logo.classList.remove("is-active");
26  });
27
28  function updateActiveScreenshot() {
29    const activeScreenshotName = screenshotOrder[currentIndex];
30
31    screenshots.forEach((screenshot) => {
32      screenshot.classList.remove("is-active");
33    });
34
35    logos.forEach((logo) => {
36      logo.classList.remove("is-active");
37    });
38
39    const activeScreenshot = Array.from(screenshots).find(
40      (screenshot) => screenshot.dataset.screenshot === activeScreenshotName
41    );
42
43    if (activeScreenshot) {
44      activeScreenshot.classList.add("is-active");
45    }
46
47    const activeLogo = Array.from(logos).find(
48      (logo) => logo.dataset.logo === activeScreenshotName
49    );
50
51    if (activeLogo) {
52      activeLogo.classList.add("is-active");
53    }
54  }
55
56  function startInterval() {
57    if (intervalId) {
58      clearInterval(intervalId);
59    }
60    intervalId = setInterval(() => {
61      currentIndex = (currentIndex + 1) % screenshotOrder.length;
62      updateActiveScreenshot();
63    }, SCREENSHOT_INTERVAL);
64  }
65
66  updateActiveScreenshot();
67  startInterval();
68
69  screenshotsContainer.addEventListener("mouseenter", () => {
70    if (intervalId) {
71      clearInterval(intervalId);
72      intervalId = null;
73    }
74  });
75
76  screenshotsContainer.addEventListener("mouseleave", () => {
77    startInterval();
78  });
79
80  logos.forEach((logo) => {
81    logo.addEventListener("click", function (e) {
82      e.preventDefault();
83      e.stopPropagation();
84      const logoName = this.dataset.logo;
85      if (logoName) {
86        const newIndex = screenshotOrder.indexOf(logoName);
87        if (newIndex !== -1) {
88          currentIndex = newIndex;
89          updateActiveScreenshot();
90          startInterval();
91        }
92      }
93    });
94  });
95});