Banded image wipe transition

banded-image-wipe-transition.markdown

Banded image wipe transition

Experimenting!

A Pen by Ed Hicks on CodePen.

License.

DEMO https://codemyui.com/horizontal-slit-image-transition-animation/

script.js

var images = new Array(
	'https://images.unsplash.com/photo-1495162048225-6b3b37b8a69e?w=1782',
	'https://images.unsplash.com/photo-1498248193836-88f8c8d70a3f?w=1782',
	'https://images.unsplash.com/photo-1508336743279-fd953558a230?w=1634',
	'https://images.unsplash.com/photo-1505845297973-ae7a996087c4?w=1780',
	'https://images.unsplash.com/photo-1498637841888-108c6b723fcb?w=1782'
);

var slices = 64;
var interval = 3500;
var numImages = images.length;
var imageIndex = 0;
var count = 0;
var timer = null;

var containerOne = document.createElement('div');
containerOne.className = 'image one';
var containerTwo = document.createElement('div');
containerTwo.className = 'image two';

for(var i = 0; i < slices; i++) {
	var div = document.createElement('div');
	containerOne.appendChild(div);
	var div = document.createElement('div');
	containerTwo.appendChild(div);
}

document.body.appendChild(containerOne);
document.body.appendChild(containerTwo);

function switchImages(){
	var newContainer = document.querySelectorAll('.image')[(count % 2)];
	var oldContainer = document.querySelectorAll('.image')[((count+1) % 2)];
	if(imageIndex >= numImages) imageIndex = 0;
	var im = new Image();
	im.addEventListener('load', function(){
		var nodes = newContainer.childNodes;
		for(var i = 0; i < nodes.length; i++) {
			nodes[i].style.backgroundImage = 'url('+images[imageIndex]+')';
		}
		newContainer.classList.add('animate-in');
		newContainer.classList.remove('animate-out');
		oldContainer.classList.add('animate-out');
		oldContainer.classList.remove('animate-in');
		newContainer.style.opacity = 1;
		oldContainer.style.opacity = 0;
		count++;
		imageIndex++;
		timer = setTimeout(switchImages, interval);
	});
	im.src = images[imageIndex];
}
switchImages();

style.scss

$slices: 64;
$slide-amount: 15%;
$animation-duration: 1000ms;

body {
	background-color: #202020;
}

.image {
	
	position: absolute;
	width: 70vw;
	height: 48vw;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity ease-in-out $animation-duration;
	border: solid 1.25vw #fff;
	box-shadow: 0 1vw 6vw rgba(0,0,0,.6);

	div {
		
		width: 100%;
		height: 100% / $slices;
		
		background-size: auto (100% * $slices);
		background-repeat: no-repeat;
		background-position-x: 50%;
		
		animation-duration: $animation-duration;
		animation-timing-function: ease-out;


		
		
		
		@for $i from 1 through $slices {
			&:nth-child(#{$i}) {
				background-position-y: (100% / $slices) * ($i - 1);
			}
		}

	}
	
	&.animate-in div {
		&:nth-child(odd) {
			animation-name: in-left;
		}
		&:nth-child(even) {
			animation-name: in-right;
		}
	}
	
	&.animate-out div {
		&:nth-child(odd) {
			animation-name: out-right;
		}
		&:nth-child(even) {
			animation-name: out-left;
		}
	}
	
}

@keyframes in-left {
	0% {
		background-position-x: (50% + $slide-amount);
	}
	100% {
		background-position-x: 50%;
	}
}

@keyframes in-right {
	0% {
		background-position-x: (50% - $slide-amount);
	}
	100% {
		background-position-x: 50%;
	}
}

@keyframes out-right {
	0% {
		background-position-x: 50%;
	}
	100% {
		background-position-x: (50% + $slide-amount);
	}
}

@keyframes out-left {
	0% {
		background-position-x: 50%;
	}
	100% {
		background-position-x: (50% - $slide-amount);
	}
}