fix(animations): avoid zomm in/out effect on mobile

Due to translateX transform and overflow, on small screens a zoom in /
zoom out effect happened. So I adjust the animations for branding and
job.

3 files changed, 18 insertions, 37 deletions

diff --git a/src/components/Branding/Branding.module.scss b/src/components/Branding/Branding.module.scss
index ed2cc16..b6e1aa1 100644
--- a/src/components/Branding/Branding.module.scss
+++ b/src/components/Branding/Branding.module.scss
@@ -91,6 +91,7 @@
   font-weight: 500;
   letter-spacing: 0.01ex;
   position: relative;
+  overflow: hidden;
 
   &::after {
     content: "|";
@@ -104,7 +105,7 @@
     color: var(--color-primary-darker);
     font-weight: 400;
     visibility: hidden;
-    transform: scaleX(0) translateX(100%);
+    transform: translateX(100%);
     transform-origin: right;
     animation: var(--branding-name-animation);
   }
@@ -122,6 +123,7 @@
   font-size: var(--font-size-lg);
   font-weight: 500;
   position: relative;
+  overflow: hidden;
 
   &::after {
     content: "|";
@@ -135,7 +137,7 @@
     color: var(--color-primary-darker);
     font-weight: 400;
     visibility: hidden;
-    transform: scaleX(0) translateX(100%);
+    transform: translateX(100%);
     transform-origin: right;
     animation: var(--branding-job-animation);
   }
diff --git a/src/components/Branding/Branding.tsx b/src/components/Branding/Branding.tsx
index c10fcf6..5c76fd2 100644
--- a/src/components/Branding/Branding.tsx
+++ b/src/components/Branding/Branding.tsx
@@ -24,7 +24,7 @@ const Branding: BrandingReturn = ({ isHome = false }) => {
     if (logoRef.current) {
       logoRef.current.style.setProperty(
         '--branding-logo-animation',
-        'flip-logo 6.4s ease-in 0s 1'
+        'flip-logo 9s ease-in 0s 1'
       );
     }
   }, []);
@@ -33,7 +33,7 @@ const Branding: BrandingReturn = ({ isHome = false }) => {
     if (titleRef.current) {
       titleRef.current.style.setProperty(
         '--branding-name-animation',
-        'blink 0.5s ease-in-out 0s 1, branding-name-typing 3s linear 0s 1'
+        'blink 0.8s ease-in-out 0s 2, typing 4.3s linear 0s 1'
       );
     }
   }, []);
@@ -42,7 +42,7 @@ const Branding: BrandingReturn = ({ isHome = false }) => {
     if (jobRef.current) {
       jobRef.current.style.setProperty(
         '--branding-job-animation',
-        'branding-job-typing 8s linear 0s 1, blink 0.8s ease-in-out 6s 3'
+        'hide-text 4.25s linear 0s 1, blink 0.8s ease-in-out 4.25s 2, typing 3.8s linear 4.25s 1'
       );
     }
   }, []);
diff --git a/src/styles/base/_animations.scss b/src/styles/base/_animations.scss
index ff12c8c..ad870e9 100644
--- a/src/styles/base/_animations.scss
+++ b/src/styles/base/_animations.scss
@@ -75,7 +75,7 @@
 
 @keyframes flip-logo {
   0%,
-  85% {
+  90% {
     transform: rotateY(180deg);
   }
 
@@ -84,48 +84,27 @@
   }
 }
 
-@keyframes branding-name-typing {
+@keyframes hide-text {
   0%,
-  20% {
-    transform: scaleX(1) translateX(0);
-    transform-origin: right;
-    visibility: visible;
-  }
-
   100% {
-    transform: scaleX(1) translateX(100%);
-    transform-origin: right;
-  }
-}
-
-@keyframes branding-job-typing {
-  0% {
-    transform: scaleX(1) translateX(0);
+    transform: translateX(0);
     transform-origin: right;
     content: "";
     visibility: visible;
   }
+}
 
-  48% {
-    content: "";
-  }
-
-  49% {
-    content: "|";
-  }
-
-  51% {
-    transform: scaleX(1) translateX(0);
-    transform-origin: right;
-  }
-
-  70% {
-    transform: scaleX(1) translateX(100%);
+@keyframes typing {
+  0%,
+  35% {
+    transform: translateX(0);
     transform-origin: right;
+    content: "|";
+    visibility: visible;
   }
 
   100% {
-    transform: scaleX(0) translateX(100%);
+    transform: translateX(100%);
     transform-origin: right;
   }
 }