Split Screen Animation with Spilt js | Jquery Plugin Tutorial

ADD PLUGIN'S JQUERY FILE

<script src="split.min.js"></script>

HTML

<div class="wrapper">
    <div class="split" id="img-one">
</div>
<div class="split" id="img-two">
</div>
</div>

CSS

* {
  box-sizing: border-box;
}
body {
    padding: 0;
  margin: 0;
  height: 100vh;
}
.wrapper {
    display: flex;
  justify-items: center;
  align-items: center;
  width: 100%;
  height: 100%;  
}
.split {
  width:100%;
  height:100%;
}
#img-one {
  background: url("https://i.postimg.cc/d0fPCs73/1.jpg");
  background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
}
#img-two {
  background: url("https://i.postimg.cc/ZnhQPCJb/2.jpg");
  background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
}
.gutter {
  cursor: ew-resize;
  height: 100%;
  background: #fff;
}

INITIATE THE PLUGIN