<div class="wrap">
    <div class="stepper">
        <span class="count first active hide">15</span>
        <span class="count second next"></span>
    </div>
    <img src="https://alikinvv.github.io/stepper-iteration/build/img/arrow-top.svg" alt="" class="arrow-top">
    <img src="https://alikinvv.github.io/stepper-iteration/build/img/arrow-bottom.svg" alt="" class="arrow-bottom">
</div>

<span class="desc">Hold & Drag</span>

<!-- github  -->
<a href="https://github.com/alikinvv/stepper-iteration" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#FFF3F5; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

html, body {
	height: 100%;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	color: #231F20;
	font-size: 20px;
	background: #FFF3F5;
}

.wrap {
	position: relative;
	margin-left: 65px;
	margin-top: 65px;
}

.stepper {
	margin-top: -65px;
	margin-left: -65px;
	width: 30px;
	height: 30px;
	background: #FF4957;
	cursor: pointer;
	width: 130px;
	height: 130px;
	border-radius: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 64px;
	position: relative;
	box-shadow: -1px 57px 80px -17px rgba(255, 73, 87, 0.25);
	overflow: hidden;
	z-index: 2;

	span {
		user-select: none;
		position: absolute;
		top: 28px;
		left: 50%;
		transform: translateY(0) translateX(-50%);

		&.active {
			transform: translateY(0) translateX(-50%);
		}

		&.hide {
			opacity: 0;
		}
	}
}

.arrow-top {
	position: absolute;
	top: -120px;
	left: 0;
	transform: translateX(-50%);
	user-select: none;
	width: 50px;
}

.arrow-bottom {
	position: absolute;
	bottom: -57px;
	left: 0;
	transform: translateX(-50%);
	user-select: none;
	width: 50px;
}







.github {
	width: 40px;
	height: 40px;
	background: url(http://alikinvv.github.io/github.svg) no-repeat center;
	position: fixed;
	bottom: 40px;
	right: 40px;
	animation: github 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s infinite;
}

@keyframes github {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

.desc {
	  position: absolute;
    top: 40px;
    left: 40px;
    color: #ffbac1;
}

var mousePos = 0;
var currentPos = 0;
var position = 0;
var draggable = false;
var blockAnimeAdd, countAnimePlus = anime.timeline(), countAnimeMinus = anime.timeline();
var offset = 130;
var direction;
var dur = 2000;
var count = parseInt($('.active').text());

$(document).on('mousedown', '.stepper', function () {
    currentPos = mousePos;

    draggable = true;
    blockAnime.pause();

    if ($('.first').hasClass('active')) {
        $('.first').removeClass('active').addClass('next');
        $('.second').removeClass('next').addClass('active');
    } else if ($('.second').hasClass('active')) {
        $('.second').removeClass('active').addClass('next');
        $('.first').removeClass('next').addClass('active');
    }

    if (direction == 'plus') {
        countAnimePlus.pause();
    }

    if (direction == 'minus') {
        countAnimeMinus.pause();        
    }
})  

$(document).on("mousemove", function (event) {
    mousePos = event.pageY;

    if (draggable) {
        position = mousePos - currentPos;
        $('.stepper').css('transform', 'translateY(' + position / 2 + 'px)');
    }

    if (position <= (offset * -1) && draggable) {
        center();
        count++;
        plus();
    }

    if (position >= offset && draggable) {
        center();
        count--;
        minus();
    }
});

$(document).on("mouseup", function (event) {
    if (draggable) {
        center();
    }
});


function center() {
    draggable = false;
    blockAnime = anime({
        targets: '.stepper',
        duration: dur,
        translateY: 0,
    });
}

function plus() {
    direction = 'plus';
    countAnimePlus = anime.timeline();    

    $('.next').text(count).css('transform', 'translateY(-100px) translateX(-50%)');

    countAnimePlus.add({ 
        targets: '.active', 
        translateY: 100, 
        translateX: '-50%',
        duration: dur,   
    })
    .add({
        targets: '.next',
        translateY: 0,
        translateX: '-50%',
        duration: dur,
        offset: '-=' + dur,
    });
}

function minus() {
    direction = 'minus';
    countAnimeMinus = anime.timeline();

    $('.next').text(count).css('transform', 'translateY(100px) translateX(-50%)');
    console.log(count)

    countAnimeMinus.add({
        targets: '.active',
        translateY: -100,
        translateX: '-50%',
        duration: dur,
    })
    .add({
        targets: '.next',
        translateY: 0,
        translateX: '-50%',
        duration: 1500,
        offset: '-=' + dur,
    });
}

center();
plus();
setTimeout(() => {
    $('.hide').removeClass('hide');
}, 300);