Stepper Iteration with Anime JS

index.html

<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>




<a href="https://github.com/alikinvv/stepper-iteration"  target="_blank" class="github"></a>

script.js

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);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

stepper-iteration-with-anime-js.markdown

Stepper Iteration with Anime JS

Dribbble shot: https://dribbble.com/shots/5614928-Stepper-XVII

A Pen by Valery Alikin on CodePen.

License.

style.scss

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;
}