<div id="container">
	<div class="total">
		<div class="previous"></div>
		<div class="current">
			<div class="yellow"></div>
			<div class="magenta"></div>
			<div class="cyan"></div>
		</div>
		<div class="next"></div>
	</div>
<div>
body {
	height: 100vh;
	width: 100vw;
	display:flex;
	background:#FBFBFB;
	overflow:hidden;
}

#container {
	margin:auto;
	.total {
		width: 600px;
		height: 48px;
		padding: 8px 4px;
		position: relative;
		cursor: pointer;
		>div{
			height:100%;
			border-radius: 16px;
			pointer-events: none;
			position:absolute;
		}
		.previous{
			top:30px;
			left:0px;
			height: 4px;
			background: #040404;
			width: calc(((100% / 6)*3) - 32px);
		}
		.current{
			// background:#F44336;
			width: 48px;
			top:0px;
			// left: calc(((100% / 6)*3) - 12px);
			position: relative;
			>div{
				position: absolute;
				top:0px;
				left:0px;
				width:100%;
				height:100%;
				border-radius: 100%;
				mix-blend-mode: multiply;
				will-change: opacity;
				&.yellow {
					background: #ffff00;
				}
				&.magenta {
					background: #ff00ff;
				}
				&.cyan {
					background: #00ffff;
				}
			}
		}
		.next{
			top:30px;
			right:0px;
			height: 4px;
			background: #040404;
			width: calc(((100% / 6)*3) - 32px);
		}
	}
}
View Compiled
API('xmerjZ')

const steps = 6;

let current = {
	value: 3
};

let total = document.querySelector(".total");

const currentDiv = document.querySelector(".current");
const yellow = currentDiv.querySelector(".yellow")
const magenta = currentDiv.querySelector(".magenta")
const cyan = currentDiv.querySelector(".cyan")

const previousDiv = document.querySelector(".previous");
const nextDiv = document.querySelector(".next");

changeStep(2);
setTimeout(()=>{
	changeStep(5);
	setTimeout(()=>{
		changeStep(1);
	},1000)
},1500)

total.addEventListener("click", function(e) {
	let x = e.offsetX / (total.offsetWidth / (steps + 1));

	changeStep(x);
	
	// 	TweenLite.to(currentDiv.style, 0.25, {
	// 	ease: Power3.easeInOut,
	// 	transform: "scale(1.5)",
	// 	onComplete: () => {
	// 		TweenLite.to(currentDiv.style, 0.75, {
	// 			ease: Elastic.easeOut.config(1, 0.3),
	// 			transform: "scale(1)"
	// 		});
	// 	}
	// });
});

let isDown = false
total.addEventListener("mousedown", function(e) {
	isDown = true
// 		let x = e.offsetX / (total.offsetWidth / (steps + 1));

// 	changeStep(x);
	// TweenLite.to(currentDiv.style, 0.25, {
	// 	ease: Elastic.easeOut.config(1, 0.5),
	// 	transform: "scale(1.5)"
	// });
});

total.addEventListener("mousemove", function(e) {
	if(isDown) {
		let x = e.offsetX / (total.offsetWidth / (steps + 1));

		changeStep(x);
	}

});

total.addEventListener("mouseup", function(e) {
	isDown = false
	// TweenLite.to(currentDiv.style, 0.5, {
	// 	ease: Power3.easeInOut,
	// 	transform: "scale(1)"
	// });
});

function changeStep(x) {
	x = x * (total.offsetWidth / (steps + 1));
	TweenLite.to(yellow.style, 0.50, {
		ease: Elastic.easeOut.config(1, 0.5),
		transform: `translateX(${x - 16}px)`
	});
	
		TweenLite.to(magenta.style, 0.75, {
		ease: Elastic.easeOut.config(1, 0.5),
		transform: `translateX(${x - 16}px)`
	});
	
		TweenLite.to(cyan.style, 0.90, {
		ease: Elastic.easeOut.config(1, 0.5),
		transform: `translateX(${x - 16}px)`
	});

	// currentDiv.style.left = x + 16 + 'px'

	if ((x-32) < 0.1) {
		TweenLite.to(previousDiv.style, 0.12, {
			ease: Power4.easeOut,
			width: Math.max(x - 32,0) + "px"
		});
	} else {
		TweenLite.to(previousDiv.style, 0.75, {
			ease: Elastic.easeOut.config(1, 0.5),
			width: Math.max(x - 32,0) + "px"
		});
	}

	// previousDiv.style.width = x + 'px'

	if (total.offsetWidth - x - 24 < 0) {
		TweenLite.to(nextDiv.style, 0.12, {
			ease: Power4.easeOut,
			width: Math.max(total.offsetWidth - x - 52, 0) + "px"
		});
	} else {
		TweenLite.to(nextDiv.style, 0.75, {
			ease: Elastic.easeOut.config(1, 0.5),
			width: Math.max(total.offsetWidth - x - 52, 0) + "px"
		});
	}

	// nextDiv.style.width = Math.max((total.offsetWidth - x) - 58,0) + 'px'
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js
  3. https://codepen.io/ClementRoche/pen/OrGaMg.js