JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.ricardostrobel.com.br/jquery.mousewheel.js"></script>
<div class="square"> Lorem Ipsum Dolor </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia suscipit velit, vitae dignissim lacus sodales vel. Quisque mattis tellus sit amet nibh dictum ultricies. Integer ac condimentum purus, fermentum blandit mi. Mauris sit amet blandit risus. Aenean feugiat felis orci, ac tincidunt nulla dictum at. Praesent malesuada erat ut ante convallis iaculis. In tortor diam, fermentum sed mollis vitae, iaculis sit amet nulla. Quisque nisl ipsum, mattis quis diam eget, viverra tempor nunc. Praesent a tellus sed erat cursus congue. Duis convallis aliquam posuere. Cras in aliquet dui. Vivamus ultricies augue nisl, ac laoreet mauris eleifend sit amet. Curabitur vehicula nunc quis tortor pulvinar pulvinar. Integer viverra pulvinar nunc, quis eleifend est dictum iaculis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia suscipit velit, vitae dignissim lacus sodales vel. Quisque mattis tellus sit amet nibh dictum ultricies. Integer ac condimentum purus, fermentum blandit mi. Mauris sit amet blandit risus. Aenean feugiat felis orci, ac tincidunt nulla dictum at. Praesent malesuada erat ut ante convallis iaculis. In tortor diam, fermentum sed mollis vitae, iaculis sit amet nulla. Quisque nisl ipsum, mattis quis diam eget, viverra tempor nunc. Praesent a tellus sed erat cursus congue. Duis convallis aliquam posuere. Cras in aliquet dui. Vivamus ultricies augue nisl, ac laoreet mauris eleifend sit amet. Curabitur vehicula nunc quis tortor pulvinar pulvinar. Integer viverra pulvinar nunc, quis eleifend est dictum iaculis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia suscipit velit, vitae dignissim lacus sodales vel. Quisque mattis tellus sit amet nibh dictum ultricies. Integer ac condimentum purus, fermentum blandit mi. Mauris sit amet blandit risus. Aenean feugiat felis orci, ac tincidunt...

CSS

.square{position:absolute; left:-230px; color:#fff;
    width:200px; height:800px; background:#000;
    -webkit-transition: -webkit-transform 350ms ease;
	-moz-transition: -moz-transform 350ms ease;
	transition: transform 350ms ease;
}

.animation{
    -webkit-transition: -webkit-transform 350ms ease;
	-moz-transition: -moz-transform 350ms ease;
	transition: transform 350ms ease;
	
	-webkit-transform: translate3d(230px,0,0);
	-moz-transform: translate3d(230px,0,0);
	transform: translate3d(230px,0,0);
}

JavaScript

$(document).mousewheel(function(event, delta, deltaX, deltaY) {
  	if (deltaX > 10){
		$(".square").addClass("animation");
	}else if(deltaX < -10){
		$(".square").removeClass("animation");
	}
	if (deltaY != 0){
	    ///Anything that makes vertical wheelscroll keeps normal
    } else {
        event.preventDefault();
    }
    // I have to preventDefault only the horizontal scroll, otherwise page will go back or go forward in history
	
});