Menu to Grid Layout Animation

*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 14px;
	--color-text: #131313;
	--color-bg: #fff;
	--color-link: #000;
	--color-link-hover: #131313;
	--padding-sides: 2rem;
	--padding-row: 1rem;
	--color-row-border: #f0f0f0;
	--color-bg-row-hover: #f0f0f0;
	--color-text-alt: #000;
	--image-gap: 1vw;
	--image-gap-large: 2vw;
	--img-size: 5vw;
	--img-size-large: 14vw;
}

body {
	margin: 0;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	font-family: auger-mono, monospace;
	font-weight: 300;
	text-transform: uppercase;
	position: relative;
}

.oh {
	position: relative;
    overflow: hidden;
}

.oh__inner {
	will-change: transform;
	display: inline-block;
}

/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;

}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	cursor: pointer;
}

.hover-line {
	overflow: hidden;
	position: relative;
}

.hover-line::before {
	content: '';
	height: 1px;
	width: 100%;
	background: currentColor;
	position: absolute;
	top: 92%;
	transition: transform 0.3s;
	transform-origin: 0% 50%;
}

.hover-line:hover::before {
	transform: scaleX(0);
	transform-origin: 100% 50%;
}

a:hover {
	text-decoration: none;
	color: var(--color-link-hover);
	outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
	background: lightgrey;
}

a:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
	background: transparent;
}

a:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: 2px solid red;
	background: transparent;
}

.unbutton {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}

.unbutton:focus {
	outline: none;
}

.frame {
	width: 100%;
	padding: 3rem var(--padding-sides);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas: 'title' 'prevdemo' 'sponsor';
	justify-content: start;
	grid-row-gap: 1rem;
	align-items: end;
	justify-items: start;
}

.frame__title {
	grid-area: title;
	display: flex;
	line-height: 1;
}

.frame__title-main {
	font-size: 1.953rem;
	margin: 0;
	font-weight: 400;
	font-family: neue-haas-grotesk-display, sans-serif;
	text-transform: none;
}

.frame__title-back {
	position: relative;
	display: flex;
	align-items: flex-end;
}

.frame__title-back span {
	display: none;
}

.frame__title-back svg {
	fill: currentColor;
}

.frame__prevdemo {
	grid-area: prevdemo;
}

.intro {
	padding: 1rem var(--padding-sides) 3rem;
}

.intro p {
	max-width: 860px;
}

.cover {
	background: var(--color-bg-row-hover);
	width: 100%;
	height: 0;
	opacity: 0;
	pointer-events: none;
	z-index: 10;
	position: fixed;
	left: 0;
	will-change: height, top;
}

.content {
	position: relative;
	z-index: 100;
	border-bottom: 1px solid var(--color-row-border);
}

.row {
	z-index: 1;
	color: var(--color-text);
	display: grid;
	position: relative;
	cursor: pointer;
	grid-template-rows: var(--img-size);
	grid-template-columns: auto 1fr;
	grid-column-gap: 5vw;
	align-items: center;
	padding: var(--padding-row) var(--padding-sides);
	border-top: 1px solid var(--color-row-border);
	transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
}

.row:hover {
	background-color: var(--color-bg-row-hover);
}

.row--current {
	z-index: 11;
	transition: border-color 0.3s ease-out;
}

.cell {
	position: relative;
}

.cell__title,
.preview__item-title {
	margin: 0;
	font-size: clamp(1.953rem,4vw,3.052rem);
	position: relative;
	font-weight: 400;
	line-height: 1;
	font-family: neue-haas-grotesk-display, sans-serif;
	white-space: nowrap;
}

.cell__title--switch {
	font-family: lores-22-serif, sans-serif;
	font-weight: 700;
}

.cell__title {
	display: grid;
	grid-template-rows: 100% 100%;
}

.cell--images {
	display: grid;
	align-content: center;
	grid-auto-columns: auto;
	grid-auto-flow: column;
	grid-gap: var(--image-gap);
	justify-content: end;
	margin-left: auto;
}

.cell__img {
	width: var(--img-size);
	display: grid;
	position: relative;
	grid-template-columns: 100%;
	grid-template-rows: auto auto;
	will-change: transform, opacity;
	opacity: 0;
}

.cell__img-inner {
	background-size: cover;
	background-position: 50% 50%;
	aspect-ratio: 1;
	width: 100%;
	border-radius: calc(var(--image-gap) / 3);
}

.cell__img-title {
	max-width: 100%;
	font-size: 1rem;
	font-weight: 300;
	color: var(--color-text-alt);
	margin: 0;
	height: 0;
	opacity: 0;
	white-space: nowrap;
	will-change: opacity, transform;

	display: none;
}

.page-footer {
	padding: 10vw 10vw 5vw;
}

.page-footer__text {
	max-width: 860px;
	margin: 1.5rem auto;
	line-height: 1.5;
}

.page-footer__credits {
	padding-top: 10vh;
	text-align: center;
}

.preview {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 200;
}

.preview__close {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1;
	padding: 2rem;
	cursor: pointer;
	opacity: 0;
	font-family: sans-serif;
}

.preview__close--show {
	pointer-events: auto;
}

.preview__item {
	width: 100%;
	height: 100%;
	display: grid;
	align-items: center;
    justify-items: center;
	align-content: center;
	grid-gap: 10vh;
	height: 0;
	opacity: 0;
	overflow: hidden;
}

.preview__item--current {
	pointer-events: auto;
	height: 100vh;
	opacity: 1;
}

.preview__item-title {
	font-family: lores-22-serif, sans-serif;
	font-weight: 700;
	font-size: clamp(1.563rem, 6vw, 3.815rem);
}

.grid {
	position: relative;
	display: grid;
	max-width: 1200px;
	width: 100%;
    grid-gap: var(--image-gap-large);
	justify-content: center;
	justify-items: center;
	--img-size: var(--img-size-large);
	grid-template-columns: repeat(4,var(--img-size));
	grid-template-rows: repeat(2,var(--img-size));
}

.grid .cell__img {
	width: var(--img-size-large);
}

@media screen and (min-width: 61em) {
	.frame {
		grid-template-rows: auto;
		grid-template-areas: 'title prevdemo sponsor';
		grid-template-columns: auto auto 1fr;
		grid-column-gap: 2rem;
	}
	:root {
		--padding-sides: 4rem;
		--padding-row: 2rem;
	}
}

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Menu to Grid Layout Animation | Codrops</title>
	<meta name="description" content="A menu that animates to a grid layout using GSAP flip" />
	<meta name="keywords" content="gsap, flip, javascript, web design, grid, layout" />
	<meta name="author" content="Codrops" />
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="https://use.typekit.net/gdf6msi.css">
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
	<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>

<body class="loading">
	<main>
		<div class="frame">
			<div class="frame__title">
				<h1 class="frame__title-main">Menu to Grid Layout Animation</h1>
				<a aria-label="Back to the article" class="frame__title-back" href="https://tympanus.net/codrops/?p=65056">
					<span class="oh__inner">Back to the article</span>
					<svg width="21px" height="21px" viewBox="0 0 24 24">
						<path vector-effect="non-scaling-stroke" d="M18.25 15.5a.75.75 0 00.75-.75v-9a.75.75 0 00-.75-.75h-9a.75.75 0 000 1.5h7.19L6.22 16.72a.75.75 0 101.06 1.06L17.5 7.56v7.19c0 .414.336.75.75.75z"></path>
					</svg>
				</a>
			</div>
			<a class="frame__prevdemo hover-line" href="http://tympanus.net/Development/GlitchPerspective/">Previous demo</a>
		</div>
		<section class="intro">
			<p>And, strange to say, those insects vying in maternal tenderness with the flower-despoiling tribe of Bees are none other than the Dung-beetles, the dealers in ordure, the scavengers of the meadows contaminated by the herd. </p>
		</section>
		<section class="content">
			<div class="cover"></div>
			<div class="row">
				<div class="cell cell--text">
					<h2 class="cell__title oh"><span class="oh__inner">Nobody's Love</span></h2>
				</div>
				<div class="cell cell--images">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/6.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/7.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/8.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/9.avif)"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="cell cell--text">
					<h2 class="cell__title oh"><span class="oh__inner">Good Wings</span></h2>
				</div>
				<div class="cell cell--images">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/1.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/2.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/3.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/4.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/5.avif)"></div>
					</div>
				</div>
			</div>
            <div class="row">
				<div class="cell cell--text">
					<h2 class="cell__title oh"><span class="oh__inner">Maniac Fly</span></h2>
				</div>
				<div class="cell cell--images">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/10.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/11.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/12.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/13.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/14.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/15.avif)"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="cell cell--text">
					<h2 class="cell__title oh"><span class="oh__inner">Crumble Toe</span></h2>
				</div>
				<div class="cell cell--images">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/16.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/17.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/18.avif)"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="cell cell--text">
					<h2 class="cell__title oh"><span class="oh__inner">Finger Wax</span></h2>
				</div>
				<div class="cell cell--images">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/19.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/20.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/21.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/22.avif)"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="cell cell--text">
					<h2 class="cell__title oh"><span class="oh__inner">Haunted X</span></h2>
				</div>
				<div class="cell cell--images">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/23.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/24.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/25.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/26.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/27.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/28.avif)"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="cell cell--text">
					<h2 class="cell__title oh"><span class="oh__inner">Next Horror</span></h2>
				</div>
				<div class="cell cell--images">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/29.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/30.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/1.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/10.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/12.avif)"></div>
					</div>
				</div>
			</div>
		</section><!-- /content -->
		<section class="preview">
			<button class="preview__close unbutton">&#9587;</button>
			<div class="preview__item">
				<h2 class="preview__item-title oh"><span class="oh__inner">Nobody's Love</span></h2>
				<div class="grid">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/27.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/26.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/25.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/24.avif)"></div>
					</div>
				</div>
			</div>
            <div class="preview__item">
				<h2 class="preview__item-title oh"><span class="oh__inner">Good Wings</span></h2>
				<div class="grid">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/30.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/29.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/28.avif)"></div>
					</div>
				</div>
			</div>
			<div class="preview__item">
				<h2 class="preview__item-title oh"><span class="oh__inner">Maniac Fly</span></h2>
				<div class="grid">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/22.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/21.avif)"></div>
					</div>
				</div>
			</div>
			<div class="preview__item">
				<h2 class="preview__item-title oh"><span class="oh__inner">Crumble Toe</span></h2>
				<div class="grid">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/20.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/19.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/30.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/31.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/2.avif)"></div>
					</div>
				</div>
			</div>
			<div class="preview__item">
				<h2 class="preview__item-title oh"><span class="oh__inner">Finger Wax</span></h2>
				<div class="grid">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/15.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/14.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/13.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/12.avif)"></div>
					</div>
				</div>
			</div>
			<div class="preview__item">
				<h2 class="preview__item-title oh"><span class="oh__inner">Haunted X</span></h2>
				<div class="grid">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/11.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/10.avif)"></div>
					</div>
				</div>
			</div>
			<div class="preview__item">
				<h2 class="preview__item-title oh"><span class="oh__inner">Next Horror</span></h2>
				<div class="grid">
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/6.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/8.avif)"></div>
					</div>
					<div class="cell__img">
						<div class="cell__img-inner" style="background-image:url(img/5.avif)"></div>
					</div>
				</div>
			</div>
		</section>
		<footer class="page-footer">
			<p class="page-footer__text">What alacrity around one and the same dropping! Never did adventurers hurrying from the four corners of the earth display such eagerness in working a Californian claim.</p>
			<p class="page-footer__text">Before the sun becomes too hot, they are there in their hundreds, large and small, promiscuously, of every sort, shape and size, hastening to carve themselves a slice of the common cake. There are some that work in the open air and scrape the surface; there are some that dig themselves galleries in the thick of the heap, in search of choice veins; others work the lower stratum and bury their spoil without delay in the underlying ground; others—the smallest—stand aside to crumble a morsel that has fallen from the mighty excavations of their more powerful fellow-workers. Some, the newcomers and, no doubt, the hungriest, consume their meal on the spot; but the greater number mean to put by a substance that will allow them to spend long days in plenty, down in some safe retreat. A nice, fresh dropping is not found just when you want it, amid the fields bare of thyme; a windfall of that sort is as manna from the sky; only fortune’s favourites receive so fair a portion. Wherefore the riches of to-day are prudently stored for the morrow.</p>
			<p class="page-footer__text">Who is this that trots towards the heap, fearing lest he come too late? His long legs move with a sudden, awkward action, as though driven by some mechanism within his belly; his little red antennæ spread their fan, a sign of anxious greed. He is coming, he has come, not without sending some few banqueters sprawling. It is the Sacred Beetle, clad all in black, the biggest and most famous of our Dung-beetles. Ancient Egypt held him in veneration and looked upon him as a symbol of immortality. Here he now sits at table, beside his fellow-guests, each of whom is giving the last touches to his ball with the flat of his broad fore-legs or else enriching it with yet one more layer before retiring to enjoy the fruit of his labours in peace. Let us follow the construction of the famous ball in all its phases.</p>
			<p class="page-footer__text">For his own needs, the Beetle is less fastidious and contents himself with a wholesale selection. The notched shield scoops and digs, eliminates and gathers somewhat at random. The fore-legs play a mighty part in the work. They are flattened, curved into the segment of a circle, supplied with powerful nervures and armed on the outside with five sturdy teeth. If a powerful effort be needed to remove an obstacle or to force a way through the thickest part of the heap, the Dung-beetle makes [6]play with his elbows, that is to say, he flings his toothed legs to right and left and clears a semi-circular space with a vigorous thrust of the rake. Room once made, a different kind of work is found for these same limbs: they collect armfuls of the material raked together by the shield and push it under the insect’s belly, between the four hind-legs. These are shaped for the turner’s trade. The legs, especially the last two, are long and slender, slightly bowed and ending in a very sharp claw. One has but to look at them to recognize a pair of spherical compasses capable of embracing a globular body in their curved branches and improving its form. In fact, their mission is to shape the ball.</p>
			<p class="page-footer__credits">
				Made by <a href="https://twitter.com/codrops">@codrops</a>
			</p>
		</footer>
	</main>
	<script type="module" src="js/index.js"></script>
</body>

</html>