Keep scale effect for navbar hider/shower?

[miketaylr]

@Regaddi landed a cool feature to hide/show the navbar based on scroll in #2265

There's a small scaling effect which looks cool, but maybe won't be so cool after using it for a while. Filing this issue for people to discuss after getting some experience with it.

(Note: this isn't a blocker, we can change things here or close it).

[Regaddi]

I actually pushed the scale effect accidentally. So I'd totally be fine removing it. It adds some uneasiness to the transition IMO.

[karlcow]

Yup just tried. These scenarios:

Scenario 1 - Without scale

This is a bit better but the opacity change is a bit disturbing (and I don't know why)

.is-offscreen {
	opacity: 0;
	transform: translateX(-50%) translateY(-100%);
}

.navigation {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 1000;
	transform: translateX(-50%);
	width: 100vw;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	background-color: var(--color-first);
	color: var(--color-second);
	transition: transform .4s ease,opacity .4s ease;
}

Scenario 2 - Without scale and removing the opacity transition

This doesn't work at all. :) Probably the worst case scenario.

.is-offscreen {
	opacity: 0; 
	transform: translateX(-50%) translateY(-100%);
}

.navigation {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 1000;
	transform: translateX(-50%);
	width: 100vw;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	background-color: var(--color-first);
	color: var(--color-second);
	transition: transform .4s ease;
}

Scenario 3 - Just the transform.

This one is the one which is the smoother on my eyes.

.is-offscreen {
	transform: translateX(-50%) translateY(-100%);
}
.navigation {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 1000;
	transform: translateX(-50%);
	width: 100vw;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	background-color: var(--color-first);
	color: var(--color-second);
	transition: transform .4s ease;
}

Thanks @Regaddi for all the contributions. Super appreciated.

[karlcow]

btw this header which disappears when scrolling exactly addresses my comment in #2087

Personally I don't think the header should be sticky. It should just go away when we scroll.

So thank you for this

[Regaddi]

I'd vote for Scenario 3, since this was nearly my initial intention 😄

[zoepage]

merged #2286