pilliers animation

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -1122,7 +1122,7 @@ footer {
 }
 #home .timeline .__timeline-content .__paragraphs {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   width: 500px;
   height: 1px;
   background: black;
@@ -1503,50 +1503,45 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   position: relative;
 }
 
-#home .visible h5:nth-of-type(1) {
+#home #paragraph-id--7 .colone-picto h5,
-  animation-delay: 1s;
+#home #paragraph-id--7 .colone-picto p,
-  animation-name: Appear;
+#home #paragraph-id--7 .colone-picto svg #pillier-1-path365,
-  animation-duration: 1s;
+#home #paragraph-id--7 .colone-picto svg #pillier-2-path367,
+#home #paragraph-id--7 .colone-picto svg #pillier-3-path369 {
+  opacity: 0;
 }
-#home .visible svg:nth-of-type(1) {
+#home .visible h5:nth-of-type(1) {
-  animation-delay: 2s; /* Start after h5 (1s) + h5 duration (1s) */
+  animation: Appear 1s 0.2s forwards;
-  animation-name: Appear;
+}
-  animation-duration: 5s; /* Assuming svg animation is 5s */
+#home .visible svg #pillier-1-path365 {
+  stroke-dasharray: 1000; /* Longueur totale du chemin */
+  stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
+  animation: Appear 1s 1.5s forwards, fillAnimation 3s 1.5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
 }
 #home .visible p:nth-of-type(1) {
-  animation-delay: 7s; /* Start after svg (2s) + svg duration (5s) */
+  animation: Appear 1.5s 3s forwards;
-  animation-name: Appear;
-  animation-duration: 1s;
 }
 #home .visible h5:nth-of-type(2) {
-  animation-delay: 8s; /* Start after p (7s) + p duration (1s) */
+  animation: Appear 1s 4s forwards;
-  animation-name: Appear;
-  animation-duration: 1s;
 }
-#home .visible svg:nth-of-type(2) {
+#home .visible svg #pillier-2-path367 {
-  animation-delay: 9s; /* Start after h5 (8s) + h5 duration (1s) */
+  stroke-dasharray: 1000; /* Longueur totale du chemin */
-  animation-name: Appear;
+  stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
-  animation-duration: 5s; /* Assuming svg animation is 5s */
+  animation: Appear 1s 5s forwards, fillAnimation 3s 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
 }
 #home .visible p:nth-of-type(2) {
-  animation-delay: 14s; /* Start after svg (9s) + svg duration (5s) */
+  animation: Appear 1.5s 6s forwards;
-  animation-name: Appear;
-  animation-duration: 1s;
 }
 #home .visible h5:nth-of-type(3) {
-  animation-delay: 15s; /* Start after p (14s) + p duration (1s) */
+  animation: Appear 1s 7s forwards;
-  animation-name: Appear;
-  animation-duration: 1s;
 }
-#home .visible svg:nth-of-type(3) {
+#home .visible svg #pillier-3-path369 {
-  animation-delay: 16s; /* Start after h5 (15s) + h5 duration (1s) */
+  stroke-dasharray: 1000; /* Longueur totale du chemin */
-  animation-name: Appear;
+  stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
-  animation-duration: 5s; /* Assuming svg animation is 5s */
+  animation: Appear 1s 8s forwards, fillAnimation 3s 8s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
 }
 #home .visible p:nth-of-type(3) {
-  animation-delay: 21s; /* Start after svg (16s) + svg duration (5s) */
+  animation: Appear 1.5s 9s forwards;
-  animation-name: Appear;
-  animation-duration: 1s;
 }
 @keyframes Appear {
   0% {
@@ -1556,24 +1551,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
     opacity: 1;
   }
 }
-#home #paragraph-id--7 .colone-picto svg #pillier-1-path365 {
-  stroke-dasharray: 1000; /* Longueur totale du chemin */
-  stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
-  animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
-  animation-delay: 5s;
-}
-#home #paragraph-id--7 .colone-picto svg #pillier-2-path367 {
-  stroke-dasharray: 0; /* Longueur totale du chemin */
-  stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
-  animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
-  animation-delay: 5s;
-}
-#home #paragraph-id--7 .colone-picto svg #pillier-3-path369 {
-  stroke-dasharray: 1000; /* Longueur totale du chemin */
-  stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
-  animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
-  animation-delay: 5s;
-}
 @keyframes fillAnimation {
   from {
     stroke-dashoffset: 1000; /* Début du chemin de décalage complet */
@@ -2031,7 +2008,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   grid-row: 2;
   grid-column: 3;
   position: relative;
-  top: -70px;
+  top: -50px;
 }
 @media (max-width: 820px) {
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) {

web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js

@@ -29,6 +29,7 @@ document.addEventListener('scroll', function() {
 // // Observer l'élément SVG
 // observer.observe(svg);
 
+//////////////////////////////////////////////////
 
 //ANimation Pilliers 
 const svg = document.querySelector('#paragraph-id--7 .colone-picto');
@@ -41,12 +42,11 @@ const observer = new IntersectionObserver(entries => {
       // svg.classList.remove('invisible');
       svg.classList.add('visible');
     } 
-    // else {
+    else {
-    //   // Optionnel : Retirez la classe si nécessaire
+      // Optionnel : Retirez la classe si nécessaire
-    //   svg.classList.remove('visible');
+      svg.classList.remove('visible');
-    //   svg.classList.add('invisible');
 
-    // }
+    }
   });
 });
 

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -347,6 +347,8 @@
         if (monthText === "juillet") {
           monthField.textContent = monthText.slice(0, 4);
           monthField.classList.add('after');
+        } else if (monthText === "juin") {
+          monthField.textContent = monthText.slice(0, 4);
         } else if (monthText.length > 3) {
           monthField.textContent = monthText.slice(0, 3);
           monthField.classList.add('after');

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss

@@ -428,7 +428,7 @@
                         grid-row: 2;
                         grid-column: 3;
                         position: relative;
-                        top: -70px;
+                        top: -50px;
                         @media(max-width: 820px){
                             grid-row: 4;
                             grid-column: 2;

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-pilliers.scss

@@ -2,55 +2,53 @@
     
 #home{  
     /////////////////animation pilliers //////////////
-
+    #paragraph-id--7 .colone-picto h5, 
+    #paragraph-id--7 .colone-picto p, 
+    #paragraph-id--7 .colone-picto svg #pillier-1-path365, 
+    #paragraph-id--7 .colone-picto svg #pillier-2-path367, 
+    #paragraph-id--7 .colone-picto svg #pillier-3-path369{
+        opacity: 0;
+    }
 
     .visible{
         h5:nth-of-type(1) {
-            animation-delay: 1s;
+            animation: Appear 1s 0.2s forwards;
-            animation-name: Appear;
-            animation-duration: 1s;
         }
-        svg:nth-of-type(1) {
+        svg #pillier-1-path365 {
-            animation-delay: 2s; /* Start after h5 (1s) + h5 duration (1s) */
+            stroke-dasharray: 1000; /* Longueur totale du chemin */
-            animation-name: Appear;
+            stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
-            animation-duration: 5s; /* Assuming svg animation is 5s */
+            animation: Appear 1s 1.5s forwards, fillAnimation 3s 1.5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
         }
         p:nth-of-type(1) {
-            animation-delay: 7s; /* Start after svg (2s) + svg duration (5s) */
+            animation: Appear 1.5s 3s forwards;
-            animation-name: Appear;
-            animation-duration: 1s;
         }
+
+
         h5:nth-of-type(2) {
-            animation-delay: 8s; /* Start after p (7s) + p duration (1s) */
+            animation: Appear 1s 4s forwards;
-            animation-name: Appear;
+            
-            animation-duration: 1s;
         }
-        svg:nth-of-type(2) {
+        svg #pillier-2-path367 {
-            animation-delay: 9s; /* Start after h5 (8s) + h5 duration (1s) */
+            stroke-dasharray: 1000; /* Longueur totale du chemin */
-            animation-name: Appear;
+            stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
-            animation-duration: 5s; /* Assuming svg animation is 5s */
+            animation: Appear 1s 5s forwards, fillAnimation 3s 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
         }
         p:nth-of-type(2) {
-            animation-delay: 14s; /* Start after svg (9s) + svg duration (5s) */
+            animation: Appear 1.5s 6s forwards;
-            animation-name: Appear;
-            animation-duration: 1s;
         }
         
         h5:nth-of-type(3) {
-            animation-delay: 15s; /* Start after p (14s) + p duration (1s) */
+            animation: Appear 1s 7s forwards;
-            animation-name: Appear;
-            animation-duration: 1s;
         }
-        svg:nth-of-type(3) {
+        svg #pillier-3-path369 {
-            animation-delay: 16s; /* Start after h5 (15s) + h5 duration (1s) */
+            stroke-dasharray: 1000; /* Longueur totale du chemin */
-            animation-name: Appear;
+            stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
-            animation-duration: 5s; /* Assuming svg animation is 5s */
+            animation: Appear 1s 8s forwards, fillAnimation 3s 8s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
         }
         p:nth-of-type(3) {
-            animation-delay: 21s; /* Start after svg (16s) + svg duration (5s) */
+            animation: Appear 1.5s 9s forwards;
-            animation-name: Appear;
-            animation-duration: 1s;
         }
+
         @keyframes Appear {
             0%{
                 opacity: 0;
@@ -59,41 +57,42 @@
                 opacity: 1;
             }
         }
-    }
+        @keyframes fillAnimation {
-    #paragraph-id--7 .colone-picto svg #pillier-1-path365{
+            from {
-        stroke-dasharray: 1000; /* Longueur totale du chemin */
+                stroke-dashoffset: 1000; /* Début du chemin de décalage complet */
-        stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
+            }
-        animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
+            to {
-        animation-delay: 5s;
+                stroke-dashoffset: 0; /* Aucun décalage, le chemin est complètement visible */
-        // animation-direction: alternate; /* Animation en aller-retour */
+            }
-
-
-    }
-    #paragraph-id--7 .colone-picto svg #pillier-2-path367{
-        stroke-dasharray: 0; /* Longueur totale du chemin */
-        stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
-        animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
-        animation-delay: 5s;
-        // animation-direction: alternate; /* Animation en aller-retour */
-
-    }
-    #paragraph-id--7 .colone-picto svg #pillier-3-path369{
-        stroke-dasharray: 1000; /* Longueur totale du chemin */
-        stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
-        animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
-        animation-delay: 5s;
-        // animation-direction: alternate; /* Animation en aller-retour */
-
-    }
-
-    @keyframes fillAnimation {
-        from {
-            stroke-dashoffset: 1000; /* Début du chemin de décalage complet */
-        }
-        to {
-            stroke-dashoffset: 0; /* Aucun décalage, le chemin est complètement visible */
         }
     }
+    // #paragraph-id--7 .colone-picto svg #pillier-1-path365{
+    //     stroke-dasharray: 1000; /* Longueur totale du chemin */
+    //     stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
+    //     animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
+    //     animation-delay: 5s;
+        // animation-direction: alternate; /* Animation en aller-retour */
+
+
+    // }
+    // #paragraph-id--7 .colone-picto svg #pillier-2-path367{
+    //     stroke-dasharray: 0; /* Longueur totale du chemin */
+    //     stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
+    //     animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
+    //     animation-delay: 5s;
+    //     // animation-direction: alternate; /* Animation en aller-retour */
+
+    // }
+    // #paragraph-id--7 .colone-picto svg #pillier-3-path369{
+    //     stroke-dasharray: 1000; /* Longueur totale du chemin */
+    //     stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
+    //     animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
+    //     animation-delay: 5s;
+    //     // animation-direction: alternate; /* Animation en aller-retour */
+
+    // }
+
+
     
 
 }

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss

@@ -64,7 +64,7 @@
             transition: all 1s;
             .__paragraphs{
                 position: relative;
-                display: inline-block;
+                display: inline-flex;
                 width: 500px;
                 height: 1px;
                 background: black;