From c7f0d83bbae0630bdb6c93735af43ea0f3141297 Mon Sep 17 00:00:00 2001 From: Aditya Thakral Date: Wed, 8 Sep 2021 13:49:45 -0400 Subject: [PATCH] Fix weird animation flash on mobile (#304) When we visit the website on mobile, there's a weird animation flash. This is caused because the navbar by default is placed at left: 0, and we see the transform animation once the page loads. This places the navbar at left: 100% (outside the screen) and transforms it to move into the screen - translateX(-100%) Reviewed-on: https://git.csclub.uwaterloo.ca/www/www-new/pulls/304 Reviewed-by: Amy Co-authored-by: Aditya Thakral Co-committed-by: Aditya Thakral --- components/Navbar.module.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/components/Navbar.module.css b/components/Navbar.module.css index 82e5475d..02ec959d 100644 --- a/components/Navbar.module.css +++ b/components/Navbar.module.css @@ -152,6 +152,11 @@ visibility: visible; } +/* Prevents a weird flash of opacity change on mobile */ +.navMobileBackground { + opacity: 0; +} + /* On a smaller desktop screen, keep the same navbar layout but decrease the * horizontal padding so it still fits */ @@ -237,7 +242,7 @@ box-sizing: border-box; height: 100%; top: 0; - right: 0; + left: 100%; overflow: auto; z-index: 30; @@ -246,7 +251,6 @@ background-color: var(--secondary-background); - transform: translateX(100vw); transition: 0.5s; } @@ -364,7 +368,7 @@ } .show.navMobileBackground + .navMenuWrapper { - transform: translateX(0); + transform: translateX(-100%); } .rotate {