Image Slider with clip-path animation

Cool slider animation with clip-path. Image slide show animation developed using CSS, HTML and JavaScript. Demo and Download options are available.

HTML Snippet

 <div class="slider" data-state="0">  
      <svg id="prev" viewBox='0 0 100 100'>
        <circle cx="50" cy="50" r="85" />
        <path d="M 65,2 17,50 65,98" />
      </svg>
      <svg id="next" viewBox='0 0 100 100'>
        <circle cx="50" cy="50" r="85" />
        <path d="M 35,2 82,50 35,98" />
      </svg>
    
    <div class="status">
      <div class="stat" data-key="0"></div>
      <div class="stat" data-key="1"></div>
      <div class="stat" data-key="2"></div>
      <div class="stat" data-key="3"></div>
      <div class="stat" data-key="4"></div>
      <div class="stat" data-key="5"></div>
    </div>
    <div class="image" data-key="0" >
      <img src="https://picsum.photos/1200/1200/?image=111" alt=""/>
    </div>
    <div class="image" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=112" alt=""/>
    </div>
    <div class="image" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=116" alt=""/>
    </div>
    <div class="image" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=125" alt=""/>
    </div>
    <div class="image" data-key="4" data-active>
      <img src="https://picsum.photos/1200/1200/?image=122" alt=""/>
    </div>
    <div class="image" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=120" alt=""/>
    </div>
  </div>
<div class="dwf">done with fun - @uchardon</div>

CSS Code

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
html { 
  height: 100%; 
  background: #1A2A3A;  
  color: #FFF; 
}
body {
  font-family: Roboto, sans-serif;
  display:flex;
  justify-content:center;
  align-items: center;
}
*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
  transition-property: clip-path, opacity;
  transition-duration: 900ms, 300ms;
  transition-timing-function: cubic-bezier(.5, 0, .5, 1);
}
.slider {
  position:relative;
  display: flex;
  width: 100vw;
  height: 90vh;
  overflow: hidden;
  .status {
    position: absolute;
    bottom: 10px;
    left:10px;
    display:flex;
    .stat {
      width:10px;
      height:10px;
      background-color:transparent;
      border-radius:50%;
      z-index:11;
      margin: 0px 5px;
      border: 2px solid #fff;
    }
    .stat[data-active] {
      background-color:#fff;
    }
  }
  
  img {
    object-fit: cover;
    object-position: center 80%;
    width: 100%;
    height: 100%;
    display: block;
  }
  .image {
    width: 100%;
    margin-right: -100%;
    opacity: 0;
    display: block;
    img {
      clip-path: circle(50px at 5vw 50%);
     }
  }
  .image[data-active] {
    opacity:1;
    img {
      clip-path: circle(100vmax at 50% 50%);
    }
  }
  .image[data-active] ~.image {
    opacity: 0;
    img{
      clip-path: circle(50px at 95vw 50%);
    }
  }
  svg {
   height: 30px;
    position:absolute;
    top:50%;
    margin-top:-15px;
    z-index: 1000;
    cursor: pointer;
    overflow:visible;
    path {
      stroke: #666;
      stroke-linecap:round;
      stroke-width:12px;
      fill:transparent;
    }
    circle {
      fill: #fff9;
    }
    &#next {
      right:5vw;

    }
    &#prev {
      left:5vw;
    }
  }
}
.dwf {
  position:fixed;
  bottom:4px;
  right:10px;
  background-color:#0003;
  padding:3px;
  border-radius:3px;
}

JavaScript Snippet

console.clear();
initslider();
function initslider() {
  const elPrevButton = document.querySelector('.slider #prev');
  const elNextButton = document.querySelector('.slider #next');

  const elImages = Array.from(document.querySelectorAll('.slider .image'));

  let state = {
    photo: 0
  };

  function send(event) {

    const elActives = document.querySelectorAll('.slider [data-active]');

    Array.from(elActives)
      .forEach(el => el.removeAttribute('data-active'));

    switch (event) {
      case 'PREV':
        state.photo--;
        // Math.max(state.photo - 1, 0);
        break;
      case 'NEXT':
        state.photo++;
        // Math.min(state.photo + 1, elImages.length - 1);
        break;
      default:
        state.photo = +event;
        break;
    }

    var len = elImages.length;
    // Loop Around
    //state.photo = ( ( state.photo % len) + len ) % len;
    state.photo = Math.max(0, Math.min( state.photo, len - 1) );

    Array.from(document.querySelectorAll(`.slider [data-key="${state.photo}"]`))
      .forEach( el => {
      el.setAttribute('data-active', true);
    });


  }
  elPrevButton.addEventListener('click', () => {
    send('PREV');
  });

  elNextButton.addEventListener('click', () => {
    send('NEXT');
  });

  const elStatus = Array.from(document.querySelectorAll('.slider .stat'));
  elStatus.forEach( stat => { 
    stat.addEventListener('click', () => {
      send(stat.dataset.key);
    });
  });
  send(0);
};

Preview

• « Previous
  Search field animation on enter
• Next »
  Desktop diagonal media block using CSS and HTML