Before/After viewer

 <!-- Adding TweenMax (or TweenLite+CSSPLugin) and Draggable -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js"></script>

<!-- The actual markup -->
<ul id="controls">
	<li class="to-start">Before</li>
	<li class="to-middle">Compare</li>
	<li class="to-end">After</li>
</ul>
		
<div id="before-after">
	<div class="view view-after"><img src="https://images.unsplash.com/photo-1509967419530-da38b4704bc6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1195&q=80" /></div>
	<div class="view view-before"><img src="https://images.unsplash.com/photo-1509967419530-da38b4704bc6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1195&q=80" /></div>
	<div id="dragme"></div>
</div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

body {
	background-image: url('https://images.unsplash.com/photo-1559827260-dc66d52bef19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');
	background-size: cover;
}


body, div, p{

	margin: 0;
	padding: 0;
	font-family: Helvetica, sans-serif;
}
			
	#before-after{
		position: relative;
		width: 600px;
		height: 500px;
		border: 2px solid grey;
		margin: 50px auto 0px;;
	}
			
		.view{
			display: flex;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
				
		  .view-before{
			  z-index: 100;
			  
		  }
				
		  .posle {
			
		  }

      .view-after{
				z-index: 200;
				filter: grayscale(100%);
			}
			
			#dragme{
				position: absolute;
				width: 5px;
				height: 100%;
				top: 0px;
				left: 0px;
				background-color: black;
				cursor: pointer;
				z-index: 300;
			}
			
			/*
				Controls
			*/
			
		ul{
			text-align: center;
			margin-top: 50px;
		}
			
			ul li{
				list-style: none;
				display: inline-block;
				font-size: 17px;
				cursor: pointer;
				margin: 0px 20px 0px 20px
			}

$(function(){	
  
  var $dragMe			    = $("#dragme");
  var $beforeAfter		= $("#before-after");
  var $viewAfter		  = $(".view-after");
				
  Draggable.create($dragMe, {
	  type:"left",
	  bounds: $beforeAfter,
	  onDrag:updateImages
  });
			   			    
  function updateImages(){
	  TweenLite.set($viewAfter, {width: $dragMe.css("left") });		//or this.x if only dragging
  }
			   
  //Intro Animation
  animateTo(350);
			   
  //Externall nav
  $(".to-start").on("click", function(){
	  animateTo(0);
  });
			   
  $(".to-middle").on("click", function(){
	  animateTo(298);  
  });
			   
  $(".to-end").on("click", function(){
	  animateTo(598);
  });
			   
  function animateTo(_left){
	  TweenLite.to( $dragMe, 1, {left: _left, onUpdate: updateImages });
  }
  
  //V2 Click added
  $beforeAfter.on("click", function(event){			   		
	  var eventLeft = event.clientX - $beforeAfter.offset().left;
	  animateTo(eventLeft);
  });
    
				
});//end jQuery wrapper