CSS next & previous clip path animation

Question

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 currently working functionally, but I now need to apply some animations when showing/hiding the slides.

In the related question, only the "next slide" functionality was needed, and a solution that was provided was to clip the "active" slide. However now since we need to do next and previous slides, I have applied the clip to the next and previous slides instead. Code as follows:

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

    $('.slide').removeClass('active next prev');

    if (current.hasClass('prev')) {
      current.addClass('active').removeClass('prev');
    } else {
      current.addClass('active').removeClass('next');
    }

    if (prev.length) {
      prev.addClass('prev');
    } else {
      $('.slide:last').addClass('prev');
    }

    if (next.length) {
      next.addClass('next');
    } else {
      $('.slide:first').addClass('next');
    }
  });
});

* {
  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;
}

.slide.next {
  clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
}

.slide.prev {
  clip-path: polygon(44% 0, 0 30%, 0 0);
}

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="banners">
  <div class="slide active">
    <div class="image" style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');">
      <div class="content">
        Slide 1
      </div>
      <div class="spanner"></div>
    </div>
  </div>

  <div class="slide next">
    <div class="image" style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');">
      <div class="content">
        Slide 2
      </div>
      <div class="spanner"></div>
    </div>
  </div>

  <div class="slide prev">
    <div class="image" style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');">
      <div class="content">
        Slide 3
      </div>
      <div class="spanner"></div>
    </div>
  </div>
</div>

Here is a JSFiddle of all the above code: https://jsfiddle.net/795f88nm/

As you will see the carousel works fine. I just need to add in animations, as follows:

• When clicking the next slide (bottom right corner) it should gradually reveal the slide upwards. The "new" next slide should gradually appear from the bottom corner.
• When clicking the previous slide (top left corner) it should gradually reveal the slide downwards. The "new" previous slide should gradually appear from the top corner.

I'm not very good at doing animations, so could do with some help on this.

Answer 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');
    } else if ($(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, 0 30%, 0 0);
  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, 0 100%, 0 0);
  }
  100% {
    clip-path: polygon(44% 0, 0 30%, 0 0);
  }
}

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banners">
  <div class="slide prev">
    <div class="image" style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');">
      <div class="content">
        Slide 1
      </div>
      <div class="spanner"></div>
    </div>
  </div>

  <div class="slide active">
    <div class="image" style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');">
      <div class="content">
        Slide 2
      </div>
      <div class="spanner"></div>
    </div>
  </div>

  <div class="slide next">
    <div class="image" style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');">
      <div class="content">
        Slide 3
      </div>
      <div class="spanner"></div>
    </div>
  </div>
</div>