make display experience more smooth

Daniere-Mathieu · May 11, 2023 · 0a347b8 · 0a347b8
1 parent 8da99e3
commit 0a347b8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -13,20 +13,24 @@ import { Image } from "@astrojs/image/components";
 ---
 
 <script>
-  const elements = document.querySelectorAll(".main__experience");
-
-  elements.forEach((element) => {
+  const element = document.getElementById("experienceWrapper");
+  if (!element) {
+    console.error("Element not found");
+  } else {
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          if (!element.classList.contains("animate"))
-            element.classList.add("animate");
+          const elements = document.querySelectorAll(".main__experience");
+          elements.forEach((element) => {
+            if (!element.classList.contains("animate"))
+              element.classList.add("animate");
+          });
         }
       });
     });
 
     observer.observe(element);
-  });
+  }
 </script>
 
 <html lang="fr">
@@ -65,7 +69,7 @@ import { Image } from "@astrojs/image/components";
         <div class="main__bar"></div>
         <h2>Experiences</h2>
         <div class="main__experienceContainer">
-          <ul class="main__experienceWrapper">
+          <ul class="main__experienceWrapper" id="experienceWrapper">
             {
               tech.map((item) => (
                 <li class="main__experience">

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -69,6 +69,7 @@
     align-items: center;
     gap: 10px;
     z-index: 1;
+    display: none;
     &:hover,
     &:focus {
       transform: rotate(3deg);
@@ -150,6 +151,7 @@
 
 .animate {
   animation: translate 2s ease-in-out;
+  display: flex;
 }
 
 @keyframes translate {
@@ -160,7 +162,7 @@
 
   to {
     transform: translateX(0%);
-    display: block;
+    display: flex;
   }
 }