Fix weird animation flash on mobile #304

Merged
a3thakra merged 1 commits from adi-navbar-animation-fix into main 1 year ago
Collaborator

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%)

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%)
a3thakra requested review from a258wang 1 year ago
a258wang reviewed 1 year ago
.show.navMobileBackground + .navMenuWrapper {
transform: translateX(0);
transform: translateX(-100%);
Owner

Previously, it looks like we were using translateX(100vw). Is there a reason why we should prefer either % or vw here?

Previously, it looks like we were using `translateX(100vw)`. Is there a reason why we should prefer either `%` or `vw` here?
Poster
Collaborator

hmm good question 🤔 I did this a while back, and I have no idea why i didn't use vw. I'll rebase and see what the difference is.

hmm good question 🤔 I did this a while back, and I have no idea why i didn't use vw. I'll rebase and see what the difference is.
Poster
Collaborator

Okay I figured it out!

  • -100% means move it by the width of the navbar.
  • -100vw means move it by the width of the screen.

The navbar is just outside the screen on the right. If we move it towards the left by it's width, it will be touching the right side of the screen. If we move it by the width of the screen, it will be touching the left side of the screen.

I rebased the branch, so you can try it on https://csclub.uwaterloo.ca/~a3thakra/csc/adi-navbar-animation-fix/

Okay I figured it out! - -100% means move it by the width of the navbar. - -100vw means move it by the width of the screen. The navbar is just outside the screen on the right. If we move it towards the left by it's width, it will be touching the right side of the screen. If we move it by the width of the screen, it will be touching the left side of the screen. I rebased the branch, so you can try it on https://csclub.uwaterloo.ca/~a3thakra/csc/adi-navbar-animation-fix/
a258wang approved these changes 1 year ago
a3thakra force-pushed adi-navbar-animation-fix from 924f13783d to 5b8658dc43 1 year ago
a3thakra merged commit c7f0d83bba into main 1 year ago
a3thakra deleted branch adi-navbar-animation-fix 1 year ago

Reviewers

a258wang approved these changes 1 year ago
continuous-integration/drone/push Build is passing
The pull request has been merged as c7f0d83bba.
Sign in to join this conversation.
No reviewers
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: www/www-new#304
Loading…
There is no content yet.