Home page sliding animation updated

Author: dwshetty

src/routes/Home/index.tsx

@@ -38,10 +38,7 @@ function Home(): JSX.Element {
             </span>
             <span className={styles.webDeveloperOverlay} data-nosnippet>
               <span className={styles.cursor}>|</span>
-              <span className={styles.overlay}>
-                <span>Web Developer&nbsp;</span>
-                <i className="fas fa-laptop-code" />
-              </span>
+              <span className={styles.overlay} />
             </span>
           </span>
         </h2>

src/routes/Home/styles.module.scss

@@ -53,9 +53,9 @@ $animationDelay: 1s;
         opacity: 1;
         color: white;
         background-color: white;
-        // animation: toggle 5s linear 4s infinite normal;
-        animation: toggle 5s linear $animationDelay infinite normal;
+        animation: toggle 8s linear $animationDelay infinite normal;
         left: 100%;
+        will-change: transform;
 
         .cursor {
           position: relative;
@@ -66,29 +66,13 @@ $animationDelay: 1s;
         }
 
         .overlay {
-          display: flex;
-          width: 212px;
+          width: 210px;
         }
       }
     }
   }
 
   .pointsWrapper {
-    // ul {
-    //   li {
-    //     transform: translateX(200%);
-    //     animation: slide-from-right 2s linear 1s 1 forwards;
-    //   }
-
-    //   li:first-child {
-    //     animation-delay: 0s;
-    //   }
-
-    //   li:last-child {
-    //     animation-delay: 2s;
-    //   }
-    // }
-
     blockquote {
       color: #000;
       text-shadow: 1px 1px 2px gold;
@@ -151,15 +135,15 @@ $animationDelay: 1s;
 
 @keyframes toggle {
   0%,
-  10%,
-  90%,
+  15%,
+  85%,
   100% {
-    left: 100%;
+    transform: translateX(0%)
   }
 
   33%,
   67% {
-    left: 0%;
+    transform: translateX(calc(-100% + 7.5px))
   }
 }
 
@@ -169,12 +153,6 @@ $animationDelay: 1s;
   }
 }
 
-// @keyframes slide-from-right {
-//   to {
-//     transform: translateX(0%);
-//   }
-// }
-
 @keyframes glowing {
   from {
     text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px gold, 0 0 40px gold,