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/src/lottie_file/SimpleXExplainedLottie.json

@@ -0,0 +1 @@
+{"ddd":0,"h":370,"w":550,"meta":{"g":"LottieFiles Figma v38"},"layers":[{"ty":4,"sr":1,"st":0,"op":10,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[11,92],"t":0},{"s":[11,92],"t":9.000000357627869}]},"s":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100,100],"t":0},{"s":[100,100],"t":9.000000357627869}]},"p":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[272,184],"t":0},{"s":[272,184],"t":9.000000357627869}]},"r":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[0],"t":0},{"s":[0],"t":9.000000357627869}]},"o":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":0},{"s":[0],"t":9.000000357627869}]}},"shapes":[{"ty":"sh","d":1,"ks":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[{"c":true,"i":[[0,0],[-0.58,0.64],[0,0],[0.58,0.64],[0.58,-0.64],[0,0],[0,0],[0.58,-0.64],[-0.58,-0.64],[0,0]],"o":[[0.58,0.64],[0,0],[0.58,-0.64],[-0.58,-0.64],[0,0],[0,0],[-0.58,-0.64],[-0.58,0.64],[0,0],[0,0]],"v":[[9.94,183.52],[12.06,183.52],[21.56,173.02],[21.56,170.68],[19.45,170.68],[11,180.02],[2.55,170.68],[0.44,170.68],[0.44,173.02],[9.94,183.52]]}],"t":0},{"s":[{"c":true,"i":[[0,0],[-0.58,0.64],[0,0],[0.58,0.64],[0.58,-0.64],[0,0],[0,0],[0.58,-0.64],[-0.58,-0.64],[0,0]],"o":[[0.58,0.64],[0,0],[0.58,-0.64],[-0.58,-0.64],[0,0],[0,0],[-0.58,-0.64],[-0.58,0.64],[0,0],[0,0]],"v":[[9.94,183.52],[12.06,183.52],[21.56,173.02],[21.56,170.68],[19.45,170.68],[11,180.02],[2.55,170.68],[0.44,170.68],[0.44,173.02],[9.94,183.52]]}],"t":9.000000357627869}]}},{"ty":"sh","d":1,"ks":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[{"c":true,"i":[[0,0],[0.58,-0.64],[0,0],[-0.58,-0.64],[-0.58,0.64],[0,0],[0,0],[-0.58,0.64],[0.58,0.64],[0,0]],"o":[[-0.58,-0.64],[0,0],[-0.58,0.64],[0.58,0.64],[0,0],[0,0],[0.58,0.64],[0.58,-0.64],[0,0],[0,0]],"v":[[12.06,0.48],[9.94,0.48],[0.44,10.98],[0.44,13.32],[2.55,13.32],[11,3.98],[19.45,13.32],[21.56,13.32],[21.56,10.98],[12.06,0.48]]}],"t":0},{"s":[{"c":true,"i":[[0,0],[0.58,-0.64],[0,0],[-0.58,-0.64],[-0.58,0.64],[0,0],[0,0],[-0.58,0.64],[0.58,0.64],[0,0]],"o":[[-0.58,-0.64],[0,0],[-0.58,0.64],[0.58,0.64],[0,0],[0,0],[0.58,0.64],[0.58,-0.64],[0,0],[0,0]],"v":[[12.06,0.48],[9.94,0.48],[0.44,10.98],[0.44,13.32],[2.55,13.32],[11,3.98],[19.45,13.32],[21.56,13.32],[21.56,10.98],[12.06,0.48]]}],"t":9.000000357627869}]}},{"ty":"sh","d":1,"ks":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[12.49,182.35],[12.49,1.65],[9.51,1.65],[9.51,182.35],[12.49,182.35]]}],"t":0},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[12.49,182.35],[12.49,1.65],[9.51,1.65],[9.51,182.35],[12.49,182.35]]}],"t":9.000000357627869}]}},{"ty":"fl","c":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[0.1059,0.7686,0.749],"t":0},{"s":[0.1059,0.7686,0.749],"t":9.000000357627869}]},"r":1,"o":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":0},{"s":[100],"t":9.000000357627869}]}}],"ind":1},{"ty":4,"sr":1,"st":0,"op":45,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[5.02,0],"t":0},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[5.02,0],"t":9},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[5.02,0],"t":18},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[5.02,0],"t":26},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[5.02,0],"t":35},{"s":[5.02,0],"t":43.500001430511475}]},"s":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100,100],"t":0},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100,100],"t":9},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100,100],"t":18},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100,100],"t":26},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100,100],"t":35},{"s":[100,100],"t":43.500001430511475}]},"p":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[455.29,157.61],"t":0},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[455.29,157.61],"t":9},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[455.29,157.61],"t":18},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[455.29,157.61],"t":26},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[455.29,157.61],"t":35},{"s":[455.29,157.61],"t":43.500001430511475}]},"r":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[31.32],"t":0},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[31.32],"t":9},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[31.32],"t":18},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[31.32],"t":26},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[31.32],"t":35},{"s":[31.32],"t":43.500001430511475}]},"o":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[0],"t":0},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":9},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":18},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":26},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":35},{"s":[0],"t":43.500001430511475}]}},"shapes":[{"ty":"sh","d":1,"ks":{"a":Line truncated

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