Fix countup on community page (#40904)

Co-authored-by: Copilot <[email protected]>

Author: mrdarrengriffin

sass/homeassistant/pages/community/_stats.scss

@@ -1,53 +1,19 @@
-@property --num {
-    syntax: '<integer>';
-    initial-value: 0;
-    inherits: false;
-}
-
 .stats {
-
     display: flex;
     flex-wrap: wrap;
     gap: 24px 40px;
 
-    &[data-dsap-seen] {
-        .stat {
-            .stat-value span {
-                --num: attr(data-value type(#{'<number>'}));
-            }
-        }
-    }
-
     .stat {
         display: flex;
         flex-direction: column;
         min-width: 100px;
 
-        @for $i from 0 through 10 {
-            &:nth-child(#{$i + 1}) {
-                .stat-value span {
-                    transition-delay: #{$i * 0.15}s;
-                }
-            }
-        }
-
         .stat-value {
             @include h3;
 
             color: var(--color-secondary);
             display: flex;
             gap: 4px;
-
-            span {
-                --num: 0;
-
-                transition: --num 1.5s ease-out;
-                counter-reset: num var(--num);
-
-                &::after {
-                    content: counter(num);
-                }
-            }
         }
 
         .stat-label {

source/community/components/_global.html

@@ -35,18 +35,45 @@ <h2>A Global Community, Growing Every Day</h2>
         <div class="photos-wrapper">
             <div class="photos" data-dsap>
                 <figure class="photo large">
-                    <img src="/images/community/utrecht.webp" alt="A crowd of people gathering in a bar - Utrecht, Netherlands" />
+                    <img src="/images/community/utrecht.webp"
+                        alt="A crowd of people gathering in a bar - Utrecht, Netherlands" />
                     <figcaption>Community Day 2025 - Utrecht</figcaption>
                 </figure>
                 <figure class="photo medium">
-                    <img src="/images/community/berlin.webp" alt="A group of 6 people standing in front of a bar - Berlin, Germany" />
+                    <img src="/images/community/berlin.webp"
+                        alt="A group of 6 people standing in front of a bar - Berlin, Germany" />
                     <figcaption>Community Meetup - IFA Berlin 2025</figcaption>
                 </figure>
                 <figure class="photo small">
-                    <img src="/images/community/columbus.webp" alt="A few people gathering around a table demonstrating ESP32 hardware - Columbus, Ohio" />
+                    <img src="/images/community/columbus.webp"
+                        alt="A few people gathering around a table demonstrating ESP32 hardware - Columbus, Ohio" />
                     <figcaption>Community Day 2025 - Columbus</figcaption>
                 </figure>
             </div>
         </div>
     </div>
-</section>
+</section>
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    const stats = document.querySelectorAll("#global .stat-value span[data-value]");
+                    stats.forEach((stat) => {
+                        let demo = new countUp.CountUp(stat, stat.getAttribute("data-value"));
+                        if (!demo.error) {
+                            demo.start();
+                        } else {
+                            console.error(demo.error);
+                        }
+                    });
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.1 });
+        const statsElement = document.querySelector("#global .stats");
+        if (statsElement) {
+            observer.observe(statsElement);
+        }
+    });
+</script>

source/community/index.html

@@ -5,6 +5,7 @@
 og_image: /images/community/og.jpeg
 frontpage: false
 ---
+<script src="https://cdn.jsdelivr.net/gh/inorganik/[email protected]/dist/countUp.umd.js" type="module"></script>
 <link rel="stylesheet" href="/stylesheets/homeassistant/pages/community/index.css" />
 <script type="module">
   import {DSAP} from "/javascripts/dsap.es.js";