Tab bar navigation

index.html

<div class="container">
	<div class="phone">
		<nav class="navigation">
			<ul class="navigation__list">
				
				<li class="navigation__item">
					<a class="navigation__link active" href="#home">
						<i class="navigation__icon" data-feather="home"></i>
						<span class="navigation__text">HOME</span>
					</a>
				</li>
				<li class="navigation__item">
					<a class="navigation__link" href="#search">
						<i class="navigation__icon" data-feather="search"></i>
						<span class="navigation__text">SEARCH</span>
					</a>
				</li>
				<li class="navigation__item">
					<a class="navigation__link" href="#categories">
						<i class="navigation__icon" data-feather="layers"></i>
						<span class="navigation__text">CATEGORIES</span>
					</a>
				</li>
				<li class="navigation__item">
					<a class="navigation__link" href="#likes">
						<i class="navigation__icon" data-feather="heart"></i>
						<span class="navigation__text">LIKES</span>
					</a>
				</li>
				
			</ul>
		</nav>
	</div>
</div>

script.babel

feather.replace()

const links = document.querySelectorAll('.navigation__link')

links.forEach(link => {
	link.addEventListener('click', (e) => {
		e.preventDefault();
		if(!link.classList.contains('active')) {			
			const active = document.querySelector('.navigation__link.active');
			if(active !== null) {
				active.classList.remove('active');
			}
			link.classList.add('active');
		}
	})
})

scripts

<script src="https://unpkg.com/feather-icons"></script>

style.scss

html, body {
	height: 100%;
	min-height: 100%;
	font-family: 'Quicksand', sans-serif;
	
}
body {
	background-color: #e7eaef;
	
}

*, *::after, *::before {
	box-sizing: border-box;
}

.container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	
	background-color: #e7eaef;
	background-image: linear-gradient(145deg, #e7eaef 0%, #ffe7d1 100%);
	
	&::before {
		content: '';
		position: fixed;
		width: 700px;
		height: 1500px;
		border-radius: 50000px;
		background-color: #F6C89F;
		transform: rotate(-45deg) translate(40%, -55%);
	}
}

.phone {
	width: 400px;
	height: 100vh;
	border-radius: 50px;
	border: 7px solid white;
	transform: translateY(-40%);
	background-color: rgba(white, .3);
	backdrop-filter: blur(8px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	padding: 10px;
}


.navigation {
	width: 100%;
	background-color: white;
	border-radius: 50px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	
	&__list {
		list-style: none;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding: 0;
		
	}
	
	&__item {
		
		perspective: 100px
	}
	
	&__link {
		font-size: 12px;
		text-decoration: none;
		color: #c3cad6;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 70px;
		padding: 20px 30px;
		overflow: hidden;
		position: relative;
		outline: none;
		
		
		&::before {
			content: '';
			width: 4px;
			height: 4px;
			border-radius: 15px;
			background-color: #F6C89F;
			position: absolute;
			transform: translateY(60px) scale(.4);
			transition: all .35s cubic-bezier(0, 0.51, 0, 0.99);
			opacity: 0;
		}
	}
	
	&__icon {
		transition: all .35s ease;
		will-change: opacity, transform, background-color;
	}
	
	&__text {
		position: absolute;
		transform: translateY(60px) skewY(-20deg);
		transform-origin: left bottom;
		color: #4b8e8d;
		font-weight: 700;
		opacity: 0;
		transition: all .35s ease;
		will-change: opacity, transform, background-color;
	}
	
	&__link.active &__icon {
		transform: translateY(-60px) rotateX(90deg) scale(.4) skewY(-30deg);
		opacity: 0;
	}
	
	&__link.active &__text {
		opacity: 1;
		transform: translateY(-3px) skewY(0deg);
	}
	
	&__link.active::before {
		transform: translateY(12px) scale(1);
			transition: all .35s cubic-bezier(0, 0.51, 0, 0.99) 0.2s;
		opacity: 1;
	}
}


@keyframes dotAnime {
	0% {
		transform: translateY(60px) scale(.4);
		opacity: 0
	}
	
	75% {
		transform: translateY(-3px) scale(1);
		opacity: 1;
	}
	to {
		transform: translateY(12px);
		opacity: 1;
	}
}

@keyframes textAnime {
	from {
		transform-origin: right center;
		transform: skewY(0) translateY(0);
	}
	
	25% {
		transform: skewY(0) translateY(0);
	}
	
	60% {
		transform: skewY(-12deg) translateY(-22px);
		
	}
	
	to {
		transform: skewY(0) translateY(-3px);
	}
	
}

styles

<link href="https://fonts.googleapis.com/css?family=Quicksand:300,500,700&amp;display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />

tab-bar-navigation.markdown

Tab bar navigation

A simple interaction for your mobile app tab bar . I hope love it :)

A Pen by Hamid Ziadzadeh on CodePen.

License.