Css Next & Previous Clip Path Animation

Following on from a related question that I posted last week, I have created a custom carousel that uses clip-path to provide a snippet of the next and previous slides. This is cur

Solution 1:

Basically you can use animation with your clip-path

$(document).ready(function() {
  $('.slide').click(function() {
    var current = $('.slide.active');
    var prev = $('.slide.prev');
    var next = $('.slide.next');

    if ($(this).hasClass('prev')) {
      prev.removeClass('prev').addClass('next');
      current.removeClass('active').addClass('prev');
      next.removeClass('next').addClass('active');
    } elseif ($(this).hasClass('next')) {
      next.removeClass('next').addClass('prev');
      current.removeClass('active').addClass('next');
      prev.removeClass('prev').addClass('active');
    }

  });

});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

.banners {
  position: relative;
  background: #000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
}

.slide {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  text-align: center;
  z-index: 1;
}

.slide.active {
  z-index: 2;
  transition: all 2s ease;
}

.slide.next {
  transition: all 2s ease;
  clip-path: polygon(100%100%, 55%100%, 100%67%);
  animation: polygons_next 2s alternate;
}

.slide.prev {
  transition: all 2s ease;
  clip-path: polygon(44%0, 030%, 00);
  animation: polygons_prev 2s alternate;
}

@keyframes polygons_next {
  0% {
    clip-path: polygon(100%100%, 100%100%, 100%100%);
  }
  100% {
    clip-path: polygon(100%100%, 55%100%, 100%67%);
  }
}

@keyframes polygons_prev {
  0% {
    clip-path: polygon(100%0, 0100%, 00);
  }
  100% {
    clip-path: polygon(44%0, 030%, 00);
  }
}

.slide.next,
.slide.prev {
  z-index: 3;
  cursor: pointer;
}

.slide.image {
  height: 100%;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.content {
  color: #FFF;
  display: inline-block;
  vertical-align: middle;
  font-family: arial;
  text-transform: uppercase;
  font-size: 24px;
}

.spanner {
  vertical-align: middle;
  width: 0;
  height: 100%;
  display: inline-block;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divclass="banners"><divclass="slide prev"><divclass="image"style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');"><divclass="content">
        Slide 1
      </div><divclass="spanner"></div></div></div><divclass="slide active"><divclass="image"style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');"><divclass="content">
        Slide 2
      </div><divclass="spanner"></div></div></div><divclass="slide next"><divclass="image"style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');"><divclass="content">
        Slide 3
      </div><divclass="spanner"></div></div></div></div>