mixin splitting(title, className, dataColumns, dataRows)
  h2=title
  div(class=className, data-columns=dataColumns, data-rows=dataRows)
    p Hello
    img(src="https://raw.githubusercontent.com/flowuhh/image-host/master/splittingJS.jpg")

+splitting('Slant & Slide', 's1', '5')
+splitting('Slanted Blinds', 's2', '6')
+splitting('Show Border', 's3', '5', '5')
+splitting('Slide Over', 's4', '2', '5')
View Compiled
$px20: 20px;
$full: 100%;
$half: 50%;
$background: #F2F7F2;
@mixin transform($property) {
	-webkit-transform: $property;
	-ms-transform: $property;
	transform: $property;
}

body {
	padding: $px20 * 3;
  background-color: $background;
	text-align: center;
	font-family: "Averia Serif Libre", cursive;
}
h2 {
	font-size: $px20 * 1.5;
	margin: 0;
}

.splitting {
	width: 640px;
	margin: $px20 * 1.5 auto $px20 * 4;
	p {
		@include transform(translate(-$half, -$half));
		font-size: $px20 * 3;
		top: $half;
		left: $half;
		position: absolute;
		visibility: visible;
		margin: 0;
	}
	.cell {
		transition: 1s cubic-bezier(0.55, 0.1, 0.15, 0.95);
		transition-delay: calc(0.1s * var(--cell-index));
		position: absolute;
		top: calc(var(--row-index) * #{$full} / var(--row-total));
		left: calc(#{$full} / var(--col-total) * var(--col-index));
		height: calc(#{$full} / var(--row-total));
		width: calc(#{$full} / var(--col-total));
	}
}

.s1 {
	p {
		transform: rotate(-90deg) translate($half / 2, -$half);
		left: 0;
	}
	&:hover .cell {
		@include transform(scale(0.8) skew(-12deg) translateX($full * 1.5));
	}
}
.s2:hover .cell {
	&:nth-child(-n + 3) {
		@include transform(scale(0.8) skew(12deg) translateX(-$full));
	}
	&:nth-child(n + 4) {
		@include transform(scale(0.8) skew(-12deg) translateX($full));
	}
}
.s3:hover .cell {
	&:nth-child(n + 6):nth-child(-n + 9),
	&:nth-child(n + 16):nth-child(-n + 19) {
		@include transform(translateX(-$full * 3));
	}
	&:nth-child(n + 12):nth-child(-n + 15) {
		@include transform(translateX($full * 3));
	}
}
.s4:hover .cell {
	&:nth-child(even) {
		@include transform(translateX(-$full * 3));
	}
	&:nth-child(odd) {
		@include transform(translateX($full  * 3));
	}
}
Splitting({
	target: "[data-rows], [data-columns], [data-image]",
	by: "cells",
	image: true
});

/* Inspiration for this and other hover effects - https://codepen.io/shshaw/pen/PQbQgE */
/* Check out SplittingJS -
https://splitting.js.org */

External CSS

  1. https://unpkg.com/splitting/dist/splitting.css
  2. https://unpkg.com/splitting/dist/splitting-cells.css

External JavaScript

  1. https://unpkg.com/splitting/dist/splitting.min.js