www
/
www-new
12
2
Fork 3
Code Issues 56 Pull Requests 30 Projects Releases Wiki Activity
Labels Milestones

Fix weird animation flash on mobile #304

Merged
a3thakra merged 1 commits from adi-navbar-animation-fix into main 2 years ago
Conversation 0 Commits 1 Files Changed 1
a3thakra commented 2 years 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 2 years ago
a258wang reviewed 2 years ago
components/Navbar.module.css Outdated
.show.navMobileBackground + .navMenuWrapper {
transform: translateX(0);
transform: translateX(-100%);
a258wang commented 2 years ago
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?
a3thakra commented 2 years ago
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.
👍 1
a3thakra commented 2 years ago
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/
👍 1
a258wang approved these changes 2 years ago
a3thakra force-pushed adi-navbar-animation-fix from 924f13783d to 5b8658dc43 2 years ago
a3thakra merged commit c7f0d83bba into main 2 years ago
a3thakra deleted branch adi-navbar-animation-fix 2 years ago

Reviewers

a258wang approved these changes 2 years ago
continuous-integration/drone/push Build is passing
Details
The pull request has been merged as c7f0d83bba.
Sign in to join this conversation.
Reviewers
Request review
No reviewers
a258wang
Labels
Apply labels
Clear labels
a11y Backlog Blocked Bug Content Dependencies Design Feature Request Good First Issue In Progress Performance Priority - High Priority - Low Priority - Medium Untriaged
No Label a11y Backlog Blocked Bug Content Dependencies Design Feature Request Good First Issue In Progress Performance Priority - High Priority - Low Priority - Medium Untriaged
Milestone
Set milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Assign users
Clear assignees
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: www/www-new#304
Write Preview
Loading…
Cancel
Save
There is no content yet.
Delete Branch 'adi-navbar-animation-fix'

Deleting a branch is permanent. It CANNOT be undone. Continue?

No
Yes