Animate green exploded view (#28973)

source/green/index.html

@@ -1069,20 +1069,64 @@ frontpage_image: /images/frontpage/green-frontpage.png
           <h4 class="heading-small">eMMC&nbsp;Storage</h4>
         </div>
       </div>
-      <div id="w-node-_79ece5a2-49d8-dc2f-c851-03631dc2bea1-3f61e7c1">
-        <img
-          src="/images/green/ha-green-exploded-view.png"
-          loading="lazy"
-          width="640"
-          sizes="(max-width: 479px) 87vw, (max-width: 767px) 89vw, 640px"
-          alt="Exploded view of Home Assistant Green"
-          srcset="
-            /images/green/ha-green-exploded-view-p-500.png 500w,
-            /images/green/ha-green-exploded-view-p-800.png 800w,
-            /images/green/ha-green-exploded-view.png       961w
-          "
-          class="image-product-mobile"
-        />
+      <div
+        id="w-node-_79ece5a2-49d8-dc2f-c851-03631dc2bea1-3f61e7c1"
+      >
+        <div
+          class="exploded-view-animation animate-in" data-threshold=".9"
+        >
+          <img
+            src="/images/green/ha-green-exploded-view-3.png"
+            loading="lazy"
+            sizes="(max-width: 479px) 87vw, (max-width: 767px) 89vw, 640px"
+            alt=""
+            srcset="
+              /images/green/ha-green-exploded-view-3-p-500.png 500w,
+              /images/green/ha-green-exploded-view-3-p-800.png 800w,
+              /images/green/ha-green-exploded-view-3.png       961w
+            "
+            class="image-product-mobile exploded-part"
+          />
+          <img
+            src="/images/green/ha-green-exploded-view-2.png"
+            loading="lazy"
+            sizes="(max-width: 479px) 87vw, (max-width: 767px) 89vw, 640px"
+            alt=""
+            srcset="
+              /images/green/ha-green-exploded-view-2-p-500.png 500w,
+              /images/green/ha-green-exploded-view-2-p-800.png 800w,
+              /images/green/ha-green-exploded-view-2.png       961w
+            "
+            class="image-product-mobile exploded-part"
+            style="top: 22%"
+          />
+          <img
+            src="/images/green/ha-green-exploded-view-1.png"
+            loading="lazy"
+            sizes="(max-width: 479px) 87vw, (max-width: 767px) 89vw, 640px"
+            alt=""
+            srcset="
+              /images/green/ha-green-exploded-view-1-p-500.png 500w,
+              /images/green/ha-green-exploded-view-1-p-800.png 800w,
+              /images/green/ha-green-exploded-view-1.png       961w
+            "
+            class="image-product-mobile exploded-part"
+            style="top: 44%"
+          />
+          <img
+            src="/images/green/ha-green-exploded-view.png"
+            loading="lazy"
+            sizes="(max-width: 479px) 87vw, (max-width: 767px) 89vw, 640px"
+            alt="Exploded view of Home Assistant Green"
+            srcset="
+              /images/green/ha-green-exploded-view-p-500.png 500w,
+              /images/green/ha-green-exploded-view-p-800.png 800w,
+              /images/green/ha-green-exploded-view.png       961w
+            "
+            class="image-product-mobile exploded-view-rendered"
+            style="opacity: 0;"
+          />
+        </div>
       </div>
       <div
         id="w-node-_79ece5a2-49d8-dc2f-c851-03631dc2bea3-3f61e7c1"

source/green/script.js

@@ -1,8 +1,9 @@
+let observer;
+
 function createObserver(elements) {
-    let observer;
 
     let options = {
-        threshold: .3,
+        threshold: [.3, .9],
     };
 
     observer = new IntersectionObserver(handleIntersect, options);
@@ -13,7 +14,8 @@ function createObserver(elements) {
 
 function handleIntersect(entries, _observer) {
     entries.forEach((entry) => {
-        if (entry.intersectionRatio > 0) {
+        const threshold = entry.target.dataset.threshold || 0;
+        if (entry.intersectionRatio >= Number(threshold)) {
             entry.target.classList.add("show");
         } else {
             entry.target.classList.remove("show");
@@ -115,4 +117,14 @@ mobileMenuLinks.forEach((link) =>
         mobileMenu.classList.remove("open");
         menuMobileBtn.classList.remove("open");
     })
-);
+);
+
+const rendering = document.querySelector(".exploded-view-rendered");
+rendering.addEventListener("animationend", () => {
+    rendering.style.opacity = 1;
+    observer.unobserve(rendering.parentElement);
+    rendering.parentElement.classList.add("show");
+    document.querySelectorAll(".exploded-part").forEach((part) => {
+        part.remove();
+    });
+}, {once: true});

source/green/styles.css

@@ -81,6 +81,46 @@ article.page h3 {
   }
 }
 
+.exploded-view-animation {
+  position: relative;
+  max-width: 640px;
+  margin: auto;
+}
+
+.exploded-view-animation > .exploded-part {
+  transition: top 0.5s ease-out;
+  position: absolute;
+}
+
+.exploded-view-animation.show > .exploded-part {
+  top: 0 !important;
+}
+
+.exploded-view-animation.show > .exploded-view-rendered {
+  animation: fade-in 1s ease-out;
+  animation-delay: 0.5s;
+}
+
+.exploded-view-animation.show > .exploded-part {
+  animation: fade-in 0.5s ease-out;
+  animation-direction: reverse;
+  animation-delay: 1s;
+}
+
+.exploded-view-rendered {
+  position: relative;
+  z-index: 10;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .main-spin {
   animation: rotation 30s infinite linear;
   will-change: transform;