<div id="navbar" class="">
		<span id="shadow"></span>
		<div class="content">
			<div class="previous linkNav">
				<span class="arrow left"></span>
				<ul>
					<li class="pointer"></li>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</div>
			<div class="center">
				<a href="#" id="previousLink">Previous</a>
				<a href="#" id="nextLink">Next</a>
			</div>
			<div class="next linkNav">
				<span class="arrow right"></span>
				<ul>
					<li class="pointer"></li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
				</ul>
			</div>
		</div>
		<span id="numberPage">4</span>
	</div>
$color1: #FFEA85;
$color2: #7986C7;
$color3: #F73F52;
$color4: #F6F6F6;

$opensans : 'Open Sans', sans-serif;

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');

*{padding:0; margin:0; box-sizing: border-box;}
html{height:100%; width:100%;}
a{color: $color2; font-family: $opensans; text-decoration: none; line-height: 60px;}
body{
	background-color: $color2;
	position: relative;
	height:100%;
	width:100%;
}
#navbar{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width:600px;
	height:60px;

	#shadow{
		display: block;
		width: 80%;
		height: 50%;
		position: absolute;
		bottom: -10px;
		left: 0;
		right: 0;
		margin: auto;
		background-color: darken($color2, 8%);
		border-radius: 50px;
		filter: blur(10px);
		transition: all 0.3s ease-out;
	}

	span#numberPage{
		font-family: $opensans;
		color: darken($color2, 8%);
		font-size: 15em;
		position: absolute;
		top: -250%;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 0;
		font-weight: bold;
		text-align: center;
		display: inline-block;
	}


	.content{
		display: block;
		background-color: $color4;
		width:100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		border-radius: 4px;
		z-index: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.center{
		width: 100%;
		display: inline-block;
		font-size: 0;
		text-align: center;
		a{
			display: inline-block;
			width: 150px;
			max-width: 150px;
			overflow: hidden;
			font-size: 16px;
			position: relative;
			z-index: 1;
			transition: color 0.3s ease-out, max-width 0.6s ease-out, border-right 0.3s ease-out;
			font-weight: bold;
			&:hover{
				color: darken($color2, 10%);
				&::before{
					transform: translateY(0);
					opacity: 1;
				}
			}
			&::before{
				content: "P";
				display: block;
				color: darken($color1, 10%);
				font-size: 150px;
				font-weight: bold;
				text-transform: uppercase;
				position: absolute;
				top: 0;
				transform: translateY(10px);
				bottom: 0;
				margin: auto;
				right: 30px;
				z-index: -1;
				opacity: 0;
				transition: all 0.3s ease-out;
			}
			&:first-child{
				border-right: 1px solid darken($color4, 5%);
				text-align: right;
				padding: 0 35px 0 0;
			}
			&:last-child{
				text-align: left;
				padding: 0 0 0 35px;
				&::before{right: inherit; left:0; content:"N";}
			}
		}
	}

	.previous, .next{
		position: absolute;
		top: 0;
		height: 100%;
		width: 25px;
		background-color: darken($color1, 10%);
		cursor: pointer;
		z-index: 10;
		overflow: hidden;
		transition: all 0.3s ease-out;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		span.arrow{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin:auto;
		}
		ul{
			width: 120px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			opacity: 0;
			padding: 0;
			margin: 0;
			overflow: hidden;
			position: relative;
			li:not(.pointer){
				color: darken($color1, 30%);
				font-family: $opensans;
				list-style: none;
				padding: 5px 10px;
				text-align: center;
				width: 40px;
				transition: all 0.3s ease-out;
				&:hover, &.active{
					color: $color2;
				}
			}
			li.pointer{
				list-style: none;
				width: 20px;
				height: 2px;
				background-color: $color2;
				position: absolute;
				bottom: 0;
				left: 0;
				transition: all 0.3s ease-out;
			}
		}
	}
	.previous{
		left: 0;
		transform:translateX(-25px);
		ul{transform:translateX(-25px); li.pointer{transform:translateX(-40px);}}
	}

	.next{
		right: 0;
		transform: translateX(25px);
		ul{transform:translateX(25px);}
		li.pointer{transform:translateX(10px);}
	}


	&.firstPage{
		.content .center a{
			padding: 0;
			text-align: center;
			&::before{
				right: 0;
				left: 0;
			}
		}
		.content .center a:first-child{
			max-width: 0;
			border-right: none;
			transition: color 0.3s ease-out, max-width 0.6s ease-out 0.3s, border-right 0.3s ease-out, 0.3s;

			&::before{
				transform: translateY(10px);
				opacity: 0;
			}
		}
	}
	&.lastPage{
		.content .center a{
			padding: 0;
			text-align: center;
			&::before{
				right: 0;
				left: 0;
			}
		}
		.content .center a:first-child{
			border-right: none;
			transition: border-right 0.3s ease-out 0.3s;
		}
		.content .center a:last-child{
			max-width: 0;
			transition: color 0.3s ease-out, max-width 0.6s ease-out 0.3s, border-right 0.3s ease-out;
			&::before{
				transform: translateY(10px);
				opacity: 0;
			}
		}
	}
}

span.arrow{
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	display: block;
	border-radius: 4px;
	border-top:2px solid $color4;
	position: relative;

	&.right{
		border-right:2px solid $color4;
		transform: rotate(45deg);
		right: 2px;
	}
	&.left{
		border-left:2px solid $color4;
		transform: rotate(-45deg);
		left: 2px;
	}
}
View Compiled
$(document).ready(function() {
	CustomEase.create("extremeInOutEasing", "M0,100 C50,100 50,100 50,50 C50,0 50,0 100,0");
	CustomEase.create("extremeInElasticOutEasing", "M0,100 C50,100 50,100 50,50 C50,-1.73472348e-18 50,0 100,-1.73472348e-18");
	CustomEase.create("bouncyEasing", "M0,100 C6.50461245,96.8525391 12.6278439,88.3497543 16.6678547,0 C16.6678547,-1.79459817 31.6478577,115.871587 44.1008572,0 C44.1008572,-0.762447191 54.8688736,57.613472 63.0182497,0 C63.0182497,-0.96434046 70.1500549,29.0348701 76.4643231,0 C76.4643231,0 81.9085007,16.5050125 85.8902733,0 C85.8902733,-0.762447191 89.4362183,8.93311024 92.132216,0 C92.132216,-0.156767385 95.0157166,4.59766248 96.918051,0 C96.918051,-0.156767385 98.7040751,1.93815588 100,0");

	var navbar = $('#navbar').find('.content');

	// NavBar
	var tlIn = new TimelineMax({paused:true});
	var navBarActive = false;
	tlIn.addLabel('in');
	tlIn.to(navbar,1,{ease: Elastic.easeOut.config(1.2,0.4), scale:1.06, backgroundColor:"#FFEA85"});
	tlIn.to(navbar.siblings('#shadow'),0.6,{ease: Elastic.easeOut.config(1,0.5), y:10, backgroundColor:"#5f6cab", }, "-=1");
	tlIn.to(navbar.find('.center a:first-child'),0.2,{ease: Expo.easeOut, borderRightColor:"#ffe152"}, "-=1");
	tlIn.to(navbar.find('.previous'),0.2,{ease: Expo.easeOut, x:0}, '-=0.9');
	tlIn.to(navbar.find('.next'),0.2,{ease: Expo.easeOut, x:0}, '-=0.9');
	tlIn.addLabel('out');
	tlIn.to(navbar.find('.previous'),0.2,{ease: Expo.easeOut, x:-25});
	tlIn.to(navbar.find('.next'),0.2,{ease: Expo.easeOut, x:25}, '-=0.2');
	tlIn.to(navbar,0.6,{ease:  Expo.easeOut, scale:1, backgroundColor:"#F6F6F6"}, "+=0.2");
	tlIn.to(navbar.siblings('#shadow'),0.2,{ease: Bounce.easeOut, y:0, backgroundColor:"#7986C7", }, "-=0.6");
	tlIn.to(navbar.find('.center a:first-child'),0.2,{ease: Expo.easeOut, borderRightColor:"#e9e9e9"}, "-=0.6");
	tlIn.pause();

	navbar.on('mouseover', function(){
		if(navBarActive == false){
			navBarActive = true;
			tlIn.tweenFromTo('in', 'out');
		}
	}).on('mouseleave', function(){
		navBarActive = false;
		tlIn.play('out');
	});



	// Change page
	var page = 4;
	var tlopage = new TimelineMax({paused:true, repeat:-1, onStartParams:[page], onComplete:function(){}});
	tlopage.addLabel('more');
	tlopage.to($('span#numberPage') , 0.4, {ease: Expo.easeOut, x:20, opacity:0});
	tlopage.to($('span#numberPage'), 0.1, {ease: Expo.easeOut, x:-20, opacity:0, onUpdate:changePage, onUpdateParams:['more']});
	tlopage.to($('span#numberPage') , 0.4, {ease: Expo.easeOut, x:0, opacity:1});
	tlopage.addLabel('less');
	tlopage.to($('span#numberPage') , 0.4, {ease: Expo.easeOut, x:-20, opacity:0});
	tlopage.to($('span#numberPage'), 0.1, {ease: Expo.easeOut, x:20, opacity:0, onUpdate:changePage, onUpdateParams:['less']});
	tlopage.to($('span#numberPage') , 0.4, {ease: Expo.easeOut, x:0, opacity:1});
	tlopage.addLabel('end');

	function changePage(state){
		$('span#numberPage').empty().append(page);
	}

	$('#nextLink').on('click', function(){
		page ++;
		tlopage.tweenFromTo('more', 'less');
	});
	$('#previousLink').on('click', function(){
		if(page -1>0){
			page --;
			tlopage.tweenFromTo('less', 'end');
		}
	});


	// Active previous next
	var prevNextActive = false;
	var tlonp = new TimelineMax({paused:true});
	tlonp.addLabel('inP');
	tlonp.to(navbar.find('.previous'),0.4,{ease: Expo.easeOut, width:150});
	tlonp.to(navbar.find('.previous span.arrow'),0.4,{ease: Power4.easeOut, x:30, opacity:0}, "-=0.2");
	tlonp.to(navbar.find('.previous ul'),0.4,{ease: Power4.easeOut, x:0, opacity:1}, "-=0.2");
	tlonp.addLabel('outP');
	tlonp.to(navbar.find('.previous'),0.3,{ease: Expo.easeOut, width:25});
	tlonp.to(navbar.find('.previous span.arrow'),0.3,{ease: Expo.easeOut, x:0, opacity:1}, '-=0.3');
	tlonp.to(navbar.find('.previous ul'),0.4,{ease: Power4.easeOut, x:-25, opacity:0}, "-=0.2");
	tlonp.addLabel('inN');
	tlonp.to(navbar.find('.next'),0.3,{ease: Expo.easeOut, width:150});
	tlonp.to(navbar.find('.next span.arrow'),0.5,{ease: Power4.easeOut, x:-30, opacity:0}, "-=0.2" );
	tlonp.to(navbar.find('.next ul'),0.5,{ease: Power4.easeOut, x:0, opacity:1}, "-=0.2" );
	tlonp.addLabel('outN');
	tlonp.to(navbar.find('.next'),0.3,{ease: Expo.easeOut, width:25});
	tlonp.to(navbar.find('.next span.arrow'),0.3,{ease: Expo.easeOut, x:0, opacity:1}, "-=0.3");
	tlonp.to(navbar.find('.next ul'),0.4,{ease: Power4.easeOut, x:25, opacity:0}, "-=0.2");
	tlonp.pause();
	navbar.find('.previous').on('mouseover', function(){
		if(prevNextActive == false){
			prevNextActive = true;
			tlonp.tweenFromTo('inP', 'outP');
		}
	}).on('mouseleave', function(){
		prevNextActive = false;
		tlonp.tweenFromTo('outP', 'inN');
	});

	navbar.find('.next').on('mouseover', function(){
		if(prevNextActive == false){
			prevNextActive = true;
			tlonp.tweenFromTo('inN', 'outN');
		}
	}).on('mouseleave', function(){
		prevNextActive = false;
		tlonp.play('outN');
	});






	navbar.find('.previous ul li').on('click', function(){
		page = $(this).text();
		$('.next ul li, .previous ul li').removeClass('active');
		$(this).addClass('active');
		$('.next ul li.pointer').css({'-webkit-transform' : 'translateX(-40px)'});
		var value = (($('.previous ul li').index(this)-1)*40)+10;
		$('.previous ul li.pointer').css({'-webkit-transform': 'translateX('+value+'px)'});
		tlopage.tweenFromTo('less', 'end');
	});
	navbar.find('.next ul li').on('click', function(){
		page = $(this).text();
		$('.next ul li, .previous ul li').removeClass('active');
		$(this).addClass('active');
		$('.previous ul li.pointer').css({'-webkit-transform' : 'translateX(-40px)'});
		var value = (($('.next ul li').index(this)-1)*40)+10;
		$('.next ul li.pointer').css({'-webkit-transform' :  'translateX('+value+'px)'});
		tlopage.tweenFromTo('more', 'less');
	});

	$('#numberPage').bind('DOMSubtreeModified', function(){
			console.log($('#numberPage').text());
			if($('#numberPage').text() == 1){$('#navbar').removeClass('lastPage').addClass('firstPage');}
			else if($('#numberPage').text() == 6){$('#navbar').removeClass('firstPage').addClass('lastPage');}
			else{$('#navbar').removeClass('firstPage').removeClass('lastPage');}
	});
});

ga('create', 'UA-89645494-2', 'auto');
ga('set', {
	dimension1: __isUserLoggedIn__,
	dimension2: __isUserPro__
});
ga('send', 'pageview');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://www.romain-breton.com/ressources/greensock/CustomEase.min.js
  3. https://www.romain-breton.com/ressources/greensock/TextPlugin.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js