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/components/Branding/Branding.module.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/components/Branding/Branding.module.scss')

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