website: simplex explained graphics animation (#2713)

* website: animate simplex explained graphics

* website: update simplex network animation

* website: add lottie.min.js through node_modules

* website: update lottie.min.js copy command location

.gitignore

@@ -53,6 +53,7 @@ website/src/docs/
 website/translations.json
 website/src/img/images/
 website/src/images/
+website/src/js/lottie.min.js
 # Generated files
 website/package/generated*
 

website/.eleventy.js

@@ -238,6 +238,7 @@ module.exports = function (ty) {
   ty.addPassthroughCopy("src/video")
   ty.addPassthroughCopy("src/css")
   ty.addPassthroughCopy("src/js")
+  ty.addPassthroughCopy("src/lottie_file")
   ty.addPassthroughCopy("src/contact/*.js")
   ty.addPassthroughCopy("src/call")
   ty.addPassthroughCopy("src/hero-phone")

website/package.json

@@ -32,6 +32,7 @@
     "fs": "^0.0.1-security",
     "gray-matter": "^4.0.3",
     "jsdom": "^22.1.0",
+    "lottie-web": "5.12.2",
     "markdown-it": "^13.0.1"
   }
 }

website/src/_includes/simplex_explained.html

@@ -34,6 +34,8 @@
             <div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">{{ "simplex-explained-tab-3-text" | i18n({}, lang ) | safe }}</div>
         </div>
 
+        <div class="simplex-explained-lottie h-[340px] mb-[74px] hidden md:block"></div>
+
         <!-- Tab content -->
         <div class="swiper simplex-explained-swiper">
             <div class="swiper-wrapper h-[inherit] mb-20 md:mb-0">
@@ -41,7 +43,7 @@
                 <div class="swiper-slide h-[inherit]">
                     <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-1-text" | i18n({}, lang ) | safe }}</div>
                     <div class="flex flex-col justify-center items-center">
-                        <img class="h-[340px] mb-[74px]" src="/img/new/explained-1.svg" alt="" />
+                        <img class="h-[340px] mb-[74px] mt-[74px] md:hidden" src="/img/new/explained-1.svg" alt="" />
                         <p class="text-black dark:text-white text-[16px] font-normal text-center">
                             {{ "simplex-explained-tab-1-p-1" | i18n({}, lang ) | safe }}
                         </p>
@@ -54,7 +56,7 @@
                 <div class="swiper-slide h-[inherit]">
                     <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-2-text" | i18n({}, lang ) | safe }}</div>
                     <div class="flex flex-col justify-center items-center">
-                        <img class="h-[340px] mb-[74px]" src="/img/new/explained-2.svg" alt="" />
+                        <img class="h-[340px] mb-[74px] mt-[74px] md:hidden" src="/img/new/explained-2.svg" alt="" />
                         <p class="text-black dark:text-white text-[16px] font-normal text-center">
                             {{ "simplex-explained-tab-2-p-1" | i18n({}, lang ) | safe }}
                         </p>
@@ -67,7 +69,7 @@
                 <div class="swiper-slide h-[inherit]">
                     <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-3-text" | i18n({}, lang ) | safe }}</div>
                     <div class="flex flex-col justify-center items-center">
-                        <img class="h-[340px] mb-[74px]" src="/img/new/explained-3.svg" alt="" />
+                        <img class="h-[340px] mb-[74px] mt-[74px] md:hidden" src="/img/new/explained-3.svg" alt="" />
                         <p class="text-black dark:text-white text-[16px] font-normal text-center">
                             {{ "simplex-explained-tab-3-p-1" | i18n({}, lang ) | safe }}
                         </p>
@@ -83,17 +85,59 @@
     </div>
 </section>
 
+<script src="/js/lottie.min.js"></script>
 <script>
 window.addEventListener("load", function () {
     const simplexExplainedSwiper__bullets = document.querySelectorAll(".simplex-explained-swiper .swiper-pagination > span");
     const simplexExplainedSwiper__tabs = document.querySelectorAll("#simplex-explained .tabs .tab-button");
 
+    const simplexExplainedLottie = document.querySelector('.simplex-explained-lottie');
+
+    const simplexExplainedLottieAnimation = lottie.loadAnimation({
+        container: simplexExplainedLottie,
+        renderer: 'svg',
+        loop: false,
+        autoplay: false,
+        path: '/lottie_file/SimpleXExplainedLottie.json'
+    })
+
+    let targetFrame = null;
+
+    function animateToTarget() {
+        if (targetFrame !== null) {
+            const currentFrame = Math.round(simplexExplainedLottieAnimation.currentRawFrame);
+            if (currentFrame !== targetFrame) {
+                const direction = currentFrame < targetFrame ? 1 : -1;
+                simplexExplainedLottieAnimation.goToAndStop(currentFrame + direction, true);
+                setTimeout(animateToTarget, 22);  // Add delay here
+            }
+        }
+    }
+
     const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
             if (mutation.type === "attributes" && mutation.attributeName === "class" && mutation.target.classList.contains("swiper-pagination")) {
                 simplexExplainedSwiper__bullets.forEach((el,index) => {
                     if (el.classList.contains("swiper-pagination-bullet-active")) {
                         simplexExplainedSwiper__tabs[index].classList.add("active");
+
+                        const currentFrame = Math.round(simplexExplainedLottieAnimation.currentRawFrame);
+                        if(index === 0){
+                            if (currentFrame > 0) {
+                                targetFrame = 0;
+                                animateToTarget();
+                            }
+                        }else if(index === 1){ 
+                            if (currentFrame !== 35) {
+                                targetFrame = 35;
+                                animateToTarget();
+                            }
+                        }else if(index === 2){
+                            if (currentFrame < 68) {
+                                targetFrame = 68;
+                                animateToTarget();
+                            }
+                        }
                     } else {
                         simplexExplainedSwiper__tabs[index].classList.remove("active");
                     }

website/web.sh

@@ -22,6 +22,7 @@ for file in langs/*.json; do
 done
 
 npm install
+cp node_modules/lottie-web/build/player/lottie.min.js src/js
 node merge_translations.js
 node customize_docs_frontmatter.js