From ad00b2dc9492d20b3b8c3dcd7c5b425ee7f8d404 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 18 Feb 2022 19:36:23 +0100
Subject: 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.
---
 src/styles/base/_animations.scss | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

(limited to 'src/styles')

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;
   }
 }
 
-- 
cgit v1.2.3