<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
<div class="container">
<picture>
<img alt="" src="https://assets.codepen.io/1385231/portrait-tablet.jpg" />
</picture>
<ul class="grid">
<li class="hole-1"></li>
<li class="hole-2"></li>
<li class="hole-3"></li>
<li class="hole-4"></li>
<li class="hole-5"></li>
<li class="hole-6"></li>
<li class="name-1">
<h1>Andy</h1>
</li>
<li class="name-2">
<h1>Barefoot</h1>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
* {
border-spacing: border-box;
margin: 0;
}
li {
list-style: none;
}
.container {
width: 100%;
margin: auto;
overflow: hidden;
max-height: 80vw;
}
picture,
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
object-fit: cover;
max-height: 80vw;
object-position: top;
}
h1 {
font-weight: 700;
font-family: "Bungee";
font-size: 7vw;
line-height: 9vw;
text-align: center;
opacity: 0;
}
.grid {
display: grid;
opacity: 0;
grid-auto-rows: 9vw;
grid-template-columns: 10.9vw repeat(7, 9vw) 10.9vw;
transform-origin: 0 0;
}
.grid li {
background-color: #db1d1d;
outline: 1px dashed white;
}
gsap.set(".grid", { gridGap: "0vw" });
const tl = gsap
.timeline({
repeat: -1,
repeatDelay: 4,
defaults: { duration: 1 }
})
.to("img", { filter: "sepia(40%)" }, "+=1")
.to(".grid", { opacity: 1 }, "+=1")
.to(".grid", { skewY: "-11deg", marginTop: "-8vw", duration: 2 })
.to(".grid", { gridGap: "1.9vw", duration: 3 }, "+=1")
.to(".hole-1", {
gridColumn: "6 / 9",
gridRow: 6,
backgroundColor: "transparent"
})
.to(".hole-2", {
gridColumn: "1 / 6",
gridRow: 5,
backgroundColor: "transparent"
})
.to(".hole-3", {
gridColumn: "5 / 7",
gridRow: 3,
backgroundColor: "transparent"
})
.to(".hole-4", {
gridColumn: "3 / 5",
gridRow: 6,
backgroundColor: "transparent"
})
.to(".hole-5", {
gridColumn: "8 / 10",
gridRow: 5,
backgroundColor: "transparent"
})
.to(".hole-6", {
gridColumn: "9",
gridRow: 4,
backgroundColor: "transparent"
})
.to(".name-1", {
gridColumn: "1 / 4",
gridRow: 3,
backgroundColor: "#EBDABE"
})
.to(".name-2", {
gridColumn: "2 / 7",
gridRow: 4,
backgroundColor: "#EBDABE"
})
.to("h1", { opacity: 1 }, "+=0.5")
.to(
".grid li",
{
boxShadow: "0px 0px 0 1.98vw #db1d1d"
},
"+=2"
)
.to("body", { backgroundColor: "#db1d1d" }, "-=1")
.to(
".grid li",
{
outlineColor: "transparent"
},
"+=1.5"
);
This Pen doesn't use any external CSS resources.