<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"
  );