mixin splitting(title, className, dataColumns, dataRows)
  h2= title
  div(class=className, data-columns=dataColumns, data-rows=dataRows)
    p Hello
    img(src="https://images.unsplash.com/photo-1470219556762-1771e7f9427d")

+splitting('Slant & Slide', 's1', '5')
+splitting('Slanted Blinds', 's2', '6')
+splitting('Show Border', 's3', '5', '5')
+splitting('Slide Over', 's4', '2', '5')
View Compiled
@import url("https://fonts.googleapis.com/css?family=Averia+Serif+Libre");

body {
	padding: 60px 0;
	text-align: center;
	background-color: #f2f7f2;
	font-family: "Averia Serif Libre", cursive;
	h2 {
		font-size: 5vw;
		margin: 0 0 30px;
	}
}

.splitting {
	width: 90vw;
	margin: 0 auto 60px;
	p {
		transform: translate(-50%, -50%);
		font-size: 10vw;
		top: 50%;
		left: 50%;
		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;
		// 	Safari Fix
		top: calc(var(--row-index) * 100% / var(--row-total));
		left: calc(100% / var(--col-total) * var(--col-index));
		height: calc(100% / var(--row-total));
		width: calc(100% / var(--col-total));
	}
}

// Slant & Slide
.s1 {
	p {
		transform: rotate(-90deg) translate(25%, -50%);
		left: 0;
	}
	&:hover .cell {
		transform: scale(0.8) skew(-12deg) translateX(150%);
	}
}

// Slanted Blinds
.s2:hover .cell {
	&:nth-child(-n + 3) {
		transform: scale(0.8) skew(12deg) translateX(-100%);
	}
	&:nth-child(n + 4) {
		transform: scale(0.8) skew(-12deg) translateX(100%);
	}
}

// Show Border
.s3:hover .cell {
	&:nth-child(n + 6):nth-child(-n + 9),
	&:nth-child(n + 16):nth-child(-n + 19) {
		transform: translateX(-300%);
	}
	&:nth-child(n + 12):nth-child(-n + 15) {
		transform: translateX(300%);
	}
}

// Slide Over
.s4:hover .cell {
	&:nth-child(even) {
		transform: translateX(-300%);
	}
	&:nth-child(odd) {
		transform: translateX(300%);
	}
}
Splitting({
	target: "[data-rows], [data-columns], [data-image]",
	by: "cells",
	image: true
});

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