Side-Slide Image Gallery with clipPath and Web Animations API

index.html

<!-- works with any number of images greater than 1 (although I would suggest not using more than 6) -->
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="sidle">
    <img src="elephant-2x.jpg" alt>
    <img src="orangutan-2x.jpg" alt>
    <img src="baboon-2x.jpg" alt>
    <img src="parrot-2x.jpg" alt>
</div>

script.js

const imageArea = document.getElementById("sidle"),
images = imageArea.getElementsByTagName("img");

if (images.length > 1) {
	for (var i = 0; i < images.length; i++) {
		let topEdge = ((100 / images.length) * i) + 1,
		bottomEdge = (topEdge + (100 / images.length)) - 1;
		images[i].style.clipPath = `polygon(0% ${topEdge}%, 100% ${topEdge}%, 100% ${bottomEdge}%, 0% ${bottomEdge}%)`;
	}
	imageArea.classList.add("slide");

	function slide(imgTarget, direction) {
					 let slidy = imgTarget.animate([
							{ transform: 'translateX(0%)', clipPath: imgTarget.style.clipPath },
							{ transform: 'translateX(101%)', clipPath: imgTarget.style.clipPath },
							{ transform: 'translateX(101%)', clipPath: imgTarget.style.clipPath },
							{ transform: 'translateX(101%)', clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)' }
						], {
						duration: 666,
						easing: 'linear',
						fill: 'forwards',
						direction: direction
				 });
				 imgTarget.classList.toggle("full");
	}
	imageArea.addEventListener("click", function(e) {
		let fullImage = document.querySelector(".full");
		if (fullImage == null) {
				slide(e.target, "normal");
			 } else {
				 slide(fullImage, "reverse");
				 if (e.target !== fullImage) {
					 setTimeout(function(){ slide(e.target, "normal"); }, 200);
				 }
			 }
	})
}

side-slide-image-gallery-with-clippath-and-web-animations-api.markdown

Side-Slide Image Gallery with clipPath and Web Animations API

Chrome only for now; support for clip-path with shapes should arrive in Firefox 54, prefix-free in iOS 10.4. Inspired by motion design by Riley Shaw. Photographs by Patrick Bouquet, licensed under Creative Commons.

A Pen by Dudley Storey on CodePen.

License.

style.scss

* {
  box-sizing: border-box;
}
body {
  background: #bbb;
	margin: 2rem;
}
#sidle.slide {
  position: relative;
  width: 45%;
}
#sidle.slide img {
  position: absolute;
  width: 100%;
}
#sidle.slide img:hover {
  cursor: pointer;
}
#sidle.slide .full:hover {
  cursor: default ;
}
#sidle:not(.slide) {
  width: 98%;
  margin: 0 auto;
}
#sidle:not(.slide) img {
  width: 48%;
  display: inline-block;  
}
@media all and (max-width: 600px) {
	body {
		margin: 0;
	}
	#sidle.slide {
		width: 100%;
	}
  #sidle.slide img {
		position: static;
    width: 100% !important;
    display: inline-block; 
		-webkit-clip-path: none !important;
  } 
}