refactor(animations): replace width animations with transform

Animations based on width or height can be expensive and can cause
lower performances. So, instead I use transform to obtain the same
effect.

3 files changed, 21 insertions, 11 deletions

diff --git a/src/components/Branding/Branding.module.scss b/src/components/Branding/Branding.module.scss
index 402fa8b..ed2cc16 100644
--- a/src/components/Branding/Branding.module.scss
+++ b/src/components/Branding/Branding.module.scss
@@ -95,7 +95,7 @@
   &::after {
     content: "|";
     display: block;
-    width: 0;
+    width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
@@ -104,6 +104,8 @@
     color: var(--color-primary-darker);
     font-weight: 400;
     visibility: hidden;
+    transform: scaleX(0) translateX(100%);
+    transform-origin: right;
     animation: var(--branding-name-animation);
   }
 }
@@ -124,7 +126,7 @@
   &::after {
     content: "|";
     display: block;
-    width: 0;
+    width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
@@ -133,6 +135,8 @@
     color: var(--color-primary-darker);
     font-weight: 400;
     visibility: hidden;
+    transform: scaleX(0) 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 4ec52c3..07b9259 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 5.4s ease-in 0s 1'
+        'flip-logo 6.4s 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 2.8s linear 0s 1'
+        'blink 0.5s ease-in-out 0s 1, branding-name-typing 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 7s linear 0s 1, blink 0.8s ease-in-out 5s 3'
+        'branding-job-typing 8s linear 0s 1, blink 0.8s ease-in-out 6s 3'
       );
     }
   }, []);
diff --git a/src/styles/base/_animations.scss b/src/styles/base/_animations.scss
index 3e8f6f2..ff12c8c 100644
--- a/src/styles/base/_animations.scss
+++ b/src/styles/base/_animations.scss
@@ -87,18 +87,21 @@
 @keyframes branding-name-typing {
   0%,
   20% {
-    width: 100%;
+    transform: scaleX(1) translateX(0);
+    transform-origin: right;
     visibility: visible;
   }
 
   100% {
-    width: 0;
+    transform: scaleX(1) translateX(100%);
+    transform-origin: right;
   }
 }
 
 @keyframes branding-job-typing {
   0% {
-    width: 100%;
+    transform: scaleX(1) translateX(0);
+    transform-origin: right;
     content: "";
     visibility: visible;
   }
@@ -112,15 +115,18 @@
   }
 
   51% {
-    width: 100%;
+    transform: scaleX(1) translateX(0);
+    transform-origin: right;
   }
 
   70% {
-    width: 0;
+    transform: scaleX(1) translateX(100%);
+    transform-origin: right;
   }
 
   100% {
-    width: 0;
+    transform: scaleX(0) translateX(100%);
+    transform-origin: right;
   }
 }