Direction Sliding Animation on Menu

by Faisal Khan Janjua

HTML

<nav>
	<a href="#">Features</a>
	<a href="#">PressKit</a>
	<a href="#">Download</a>
</nav>

SCSS

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: rgb(40, 45, 45);
	font: normal 400 130%/1.5 -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

nav {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 1em;
}

a {
	position: relative;
	font-weight: 600;
	text-decoration: none;
	color: white;
	opacity: .7;
	transition: opacity .3s cubic-bezier(.51, .92, .24, 1);

	&::after {
		--scale: 0;

		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 3px;
		background: linear-gradient(135deg, rgb(115, 250, 200), rgb(0, 190, 225));
		transform: scaleX(var(--scale));
		transform-origin: var(--x) 50%;
		transition: transform .3s cubic-bezier(.51, .92, .24, 1);
	}

	&:hover {
		opacity: 1;
	}

	&:hover::after {
		--scale: 1;
	}
}

JavaScript

document.querySelectorAll('a').forEach(function(elem){
	elem.onmouseenter = elem.onmouseleave = function(e){
    const tolerance = 10;
    const left = 0;
    const right = elem.clientWidth;
    let x = e.pageX - elem.offsetLeft;
    if (x - tolerance < left) x = left;
    if (x + tolerance > right) x = right;
    elem.style.setProperty('--x', `${x}px`);
  }
});