Как все div автопрокрутки обратно при отпускании мыши

Question

При наведении мыши ширина родительского div увеличивается до 100%, и пользователь может прокручивать дочерний div с 1 по 4. Предположим, пользователь прокручивает до четвертого дочернего div, и в то же время мышь покидает, тогда ширина родительского div уменьшается до 50% по умолчанию, но я ожидаю, что время Первый ребенок появляется, прокручивая все четыре элемента div (текущий) до первого. Я попробовал что-то ниже, но это не свитки. Поэтому, пожалуйста, можете предложить решение для этого, чтобы все div автоматически прокручивались назад при отпускании мыши.

html

    var current = 0;
    var ScrollX_pixelPer = 15.05;
    $('.homePage-scrolling-wrapper').on("mousewheel", function(e) {
    	e.preventDefault();
    	var delta = ScrollX_pixelPer*(parseInt(e.originalEvent.deltaY)/33);
    	current += delta;
    	$(this).scrollLeft(current);
    });
    
    $('.homePage-scrolling-wrapper').hover(function () {
    	$('.homePage-staticSection').animate({'margin-left' : "-45%"});
    	$(this).animate({'width' : "100%"});
    	$(this).find('*').removeClass('to-right');
    }, 
    function () {
    	$('.homePage-staticSection').animate({'margin-left' : "0"});
    	$(this).animate({'width' : "50vw"});
    	$(this).children().first().addClass('to-right');
    });

body {margin: 0; padding: 0;}
*{box-sizing: border-box;}
.homePage-container,
.homePage-scrolling-wrapper {
	display: flex;
	display: -webkit-flex;
}
.homePage-staticSection,
.homePage-scrolling-wrapper {
	width: 50vw;
	height: 100vh;
	border: 1px solid red;
}
.homePage-scrolling-wrapper {
	flex-wrap: nowrap;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	z-index: 4;
	cursor: ew-resize;
}
.scrolling-item {
	min-width: 100%;
	height: 100%;
	scroll-snap-align: center;
	overflow-x: hidden;
}
.scrolling-item:nth-child(odd) {
	background: #1D5D95;
}
.scrolling-item:nth-child(even) {
	background: #CCCCCC;
}
    		
.to-right {
	position: absolute;
	left: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="homePage-container">
  <div class="homePage-staticSection"><h2>left box<h2></div>
  <div class="homePage-scrolling-wrapper">
  <div class="scrolling-item"><h2>Item-01</h2></div>
  <div class="scrolling-item"><h2>Item-02</h2></div>
  <div class="scrolling-item"><h2>Item-03</h2></div>
  <div class="scrolling-item"><h2>Item-04</h2></div>
  </div>
</div>