.snap
	.tab-panel
		.tab
			i.material-icons textsms
		.tab
			i.material-icons refresh
			.camera
		.tab
			i.material-icons sort
	.active
	.blue
	.yellow
	
	
a(href="https://youtu.be/w5sf7e65gzw") watchMeCode





//- https://dribbble.com/shots/3820584-Camera-app-tab-bar
View Compiled
@mixin object($width, $height, $bg) {
	width: $width;
	height: $height;
	background: $bg;
}
@mixin transPos($top, $right, $bottom, $left,$transX,$transY) {
	position: absolute;
	top: $top;
	left: $left;
	right: $right;
	bottom: $bottom;
	transform:translate($transX,$transY);
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
}

.snap {
	@include object(350px,350px,#E85D5E);
	border-radius:0 0 30px 30px;
	display:flex;
	overflow:hidden;
	box-shadow:0 10px 90px -2px rgba(#000,0.3);
	position:relative;
	.tab-panel {
		@include object(100%,60px,null);
		display:flex;
		flex-direction:row;
		align-self:flex-end;
		line-height: 70px;
		text-align:center;
		color:#fff;
		position:relative;
		z-index: 100;
		.tab{
			flex-grow:1;
			height:60px;
			cursor:pointer;
			&:nth-child(2) {
				position:relative;
				.camera {
					content:'';
					@include object(60px,60px,null);
					@include transPos(-60px,null,null,25%,null,null);
					z-index: 10;
					border:7px solid #fff;
					border-radius:50%;
				}
			}
		}
	}
	.active {
		@include object(60px,5px,#fff);
		@include transPos(null,null,0,50%,-50%,0);
		border-radius:30px 30px 0 0;
		z-index: 100;
	}
	.yellow {
		@include object(100%,100%,#ED994D);
		@include transPos(0,-100%,null,null,null,null);
	}
	.blue {
		@include object(100%,100%,#24CEC2);
		@include transPos(0,null,null,-100%,null,null);
	}
}

a {
	text-decoration:none;
	color:#24CEC2;
	@include transPos(null,2vh,2vh,null,null,null);
	animation:ls 1s ease-in-out infinite;
	@keyframes ls{
		50%{
			letter-spacing:0.5px;
		}
	}
}
View Compiled
var active = $('.active'),
	firstTab = $('.tab:nth-child(1)'),
	secondTab = $('.tab:nth-child(2)'),
	thirdTab = $('.tab:nth-child(3)'),
	yellowBg= $('.yellow'),
	blueBg = $('.blue'),
	snap = $('.snap'),
	sort = $('.sort');

firstTab.on('click',function(){
	active.animate({
		left:'24%'
	});
	secondTab.animate({
		marginTop:'50px'
	});
	yellowBg.animate({
		right:'-100%'
	});
	blueBg.animate({
		left:'0'
	});
	$('.camera').animate({
		left:'17%'
	});
	snap.animate({
		padding:'0 40px 0 40px'
	});
	sort.animate({
		marginLeft:'20px'
	});
});

secondTab.on('click',function(){
	active.animate({
		left:'50%'
	});
	$(this).animate({
		marginTop:'0'
	});
	$('.camera').animate({
		left:'25%'
	});
	yellowBg.animate({
		right:'-100%'
	});
	blueBg.animate({
		left:'-100%'
	});
	snap.animate({
		padding:'0'
	});
	sort.animate({
		marginLeft:'0'
	});
});
thirdTab.on('click',function(){
	active.animate({
		left:'75%'
	});
	secondTab.animate({
		marginTop:'50px'
	});
	$('.camera').animate({
		left:'17%'
	});
	yellowBg.animate({
		right:'0'
	});
	blueBg.animate({
		left:'-100%'
	});
	snap.animate({
		padding:'0 40px 0 40px'
	});
	sort.animate({
		marginLeft:'20px'
	});
});

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js