CodePen Embed - Build an asymmetric JavaScript slideshow with CSS Grid & GSAP

<div class="slides-wrapper">
  <ul class="slides">
    <li class="slide layout-a is-active">
      <figure class="img-wrapper img1-wrapper">
        <img width="1000" height="667" src="https://assets.codepen.io/162656/appartment5.jpg" alt="" />
      </figure>
      <figure class="img-wrapper img2-wrapper">
        <img width="1000" height="1334" src="https://assets.codepen.io/162656/appartment2.jpg" alt="">
      </figure>
      <figure class="img-wrapper img3-wrapper">
        <img width="1000" height="744" src="https://assets.codepen.io/162656/appartment1.jpg" alt="">
      </figure>
      <figure class="img-wrapper img4-wrapper">
        <img width="1000" height="744" src="https://assets.codepen.io/162656/appartment1.jpg" alt="">
      </figure>
      <h2 class="title text">Makenta House</h2>
      <a href="" class="btn-book text">Book Now</a>
    </li>
    <li class="slide layout-b">
      <figure class="img-wrapper img1-wrapper">
        <img width="1000" height="744" src="https://assets.codepen.io/162656/appartment1.jpg" alt="">
      </figure>
      <figure class="img-wrapper img2-wrapper">
        <img width="1000" height="1334" src="https://assets.codepen.io/162656/appartment2.jpg" alt="">
      </figure>
      <figure class="img-wrapper img3-wrapper">
        <img width="1000" height="744" src="https://assets.codepen.io/162656/appartment1.jpg" alt="">
      </figure>
      <figure class="img-wrapper img4-wrapper">
        <img width="1000" height="750" src="https://assets.codepen.io/162656/appartment3.jpg" alt="">
      </figure>
      <h2 class="title text">Delux House</h2>
      <a href="" class="btn-book text">Book Now</a>
    </li>
    <li class="slide layout-c">
      <figure class="img-wrapper img1-wrapper">
        <img width="1000" height="744" src="https://assets.codepen.io/162656/appartment1.jpg" alt="">
      </figure>
      <figure class="img-wrapper img2-wrapper">
        <img width="1000" height="744" src="https://assets.codepen.io/162656/appartment1.jpg" alt="">
      </figure>
      <figure class="img-wrapper img3-wrapper">
        <img width="1000" height="750" src="https://assets.codepen.io/162656/appartment4.jpg" alt="" />
      </figure>
      <figure class="img-wrapper img4-wrapper">
        <img width="500" height="750" src="https://assets.codepen.io/162656/appartment6.jpg" alt="">
      </figure>
      <h2 class="title text">Nova House</h2>
      <a href="" class="btn-book text">Book Now</a>
    </li>
  </ul>
  <div class="counter"><span>1</span> / 3</div>
  <div class="arrows-wrapper">
    <button class="arrow arrow-prev" aria-label="Navigate to the previous house">
      <svg width="24" height="24" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="m9.474 5.209s-4.501 4.505-6.254 6.259c-.147.146-.22.338-.22.53s.073.384.22.53c1.752 1.754 6.252 6.257 6.252 6.257.145.145.336.217.527.217.191-.001.383-.074.53-.221.293-.293.294-.766.004-1.057l-4.976-4.976h14.692c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-14.692l4.978-4.979c.289-.289.287-.761-.006-1.054-.147-.147-.339-.221-.53-.221-.191-.001-.38.071-.525.215z" fill-rule="nonzero" />
      </svg>
      Previous House
    </button>
    <button class="arrow arrow-next" aria-label="Navigate to the next house">
      Next House
      <svg width="24" height="24" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z" fill-rule="nonzero" />
      </svg>
    </button>
  </div>
</div>

<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

* {
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  margin: 0;
}

figure {
  margin: 0;
}

/* SLIDESHOW STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.slides-wrapper {
  position: relative;
}

.slides-wrapper .slides {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}

.slides-wrapper .slide {
  display: grid;
  grid-template-rows: repeat(20, 5vh);
  grid-template-columns: repeat(20, 1fr);
  grid-area: 1/1;
  opacity: 0;
  visibility: hidden;
}

.slides-wrapper .slide.is-active {
  opacity: 1;
  visibility: visible;
}

.slides-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slides-wrapper .title {
  position: relative;
  z-index: 1;
  font-size: 2em;
  padding: 0 15px;
  margin: 0;
  grid-row-end: span 2;
  grid-column-end: span 6;
}

.slides-wrapper .btn-book {
  display: inline-flex;
  align-items: center;
  border-radius: 30px;
  text-decoration: none;
  width: max-content;
  height: 40px;
  padding: 0 15px;
  font-size: 1.1em;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  background: #e36414;
  border: 2px solid transparent;
  grid-column-end: span 4;
  transition: all 0.2s ease-out;
}

.slides-wrapper .btn-book:hover {
  color: #e36414;
  background: transparent;
  border-color: currentColor;
}

/*LAYOUT A*/
.slides-wrapper .layout-a .img1-wrapper {
  grid-row: 1 / -1;
  grid-column: 1 / span 7;
}

.slides-wrapper .layout-a .img2-wrapper {
  grid-row: 6 / span 5;
  grid-column: 16 / -1;
}

.slides-wrapper .layout-a .img3-wrapper {
  grid-row: 8 / span 9;
  grid-column: 10 / span 5;
}
.slides-wrapper .layout-a .img4-wrapper {
  grid-row: 15 / -1;
  grid-column: 17 / -1;
}
.slides-wrapper .layout-a .title {
  grid-row-start: 7;
  grid-column-start: 1;
}

.slides-wrapper .layout-a .btn-book {
  grid-row: 3;
  grid-column-start: 11;
}

/*LAYOUT B*/
.slides-wrapper .layout-b .img1-wrapper {
  grid-row: 13 / -2;
  grid-column: 3 / span 5;
}
.slides-wrapper .layout-b .img2-wrapper {
  grid-row: 7 / span 6;
  grid-column: 8 / span 3;
}
.slides-wrapper .layout-b .img3-wrapper {
  grid-row: 1 / span 6;
  grid-column: 11 / span 3;
}
.slides-wrapper .layout-b .img4-wrapper {
  grid-row: 1 / -1;
  grid-column: 14 / -1;
}
.slides-wrapper .layout-b .title {
  grid-row-start: 7;
  grid-column-start: 1;
}

.slides-wrapper .layout-b .btn-book {
  grid-row: 3;
  grid-column-start: 4;
}

/*LAYOUT C*/
.slides-wrapper .layout-c .img1-wrapper {
  grid-row: 15 / -1;
  grid-column: 1 / span 7;
}

.slides-wrapper .layout-c .img2-wrapper {
  grid-row: 3 / span 5;
  grid-column: 5 / span 4;
}

.slides-wrapper .layout-c .img3-wrapper {
  grid-row: 1 / -1;
  grid-column: 10 / span 7;
}

.slides-wrapper .layout-c .img4-wrapper {
  grid-row: 12 / -1;
  grid-column: 17 / -1;
}

.slides-wrapper .layout-c .title {
  grid-row-start: 7;
  grid-column-start: 1;
}

.slides-wrapper .layout-c .btn-book {
  grid-row: 10;
  grid-column-start: 4;
}

/*NAVIGATION*/
.slides-wrapper .counter,
.slides-wrapper .arrows-wrapper {
  position: absolute;
  top: 20px;
  font-weight: bold;
}

.slides-wrapper .counter {
  left: 20px;
}

.slides-wrapper .arrows-wrapper {
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.slides-wrapper .arrow {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  font-size: 100%;
  font-weight: bold;
  font-family: inherit;
  border: none;
  white-space: nowrap;
  text-transform: uppercase;
}

.slides-wrapper .arrows-wrapper svg {
  flex-shrink: 0;
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  font-size: 0.9em;
  background: white;
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

const slidesWrapper = document.querySelector(".slides-wrapper");
const slidesListWrapper = slidesWrapper.querySelector(".slides");
const slides = slidesListWrapper.querySelectorAll(".slide");
const slidesArray = Array.from(slides);
const firstSlide = slidesListWrapper.querySelector("li:first-child");
const lastSlide = slidesListWrapper.querySelector("li:last-child");
const slideImgs = slidesListWrapper.querySelectorAll("img");
const slideTexts = slidesListWrapper.querySelectorAll(".text");
const counter = slidesWrapper.querySelector(".counter");
const counterSpan = counter.querySelector("span");
const btnArrowsWrapper = slidesWrapper.querySelector(".arrows-wrapper");
const btnArrows = btnArrowsWrapper.querySelectorAll(".arrow");
const btnArrowPrev = btnArrowsWrapper.querySelector(".arrow-prev");
const btnArrowNext = btnArrowsWrapper.querySelector(".arrow-next");
const clipPathOptions = [
  "inset(100% 0 0 0)",
  "inset(0 100% 0 0)",
  "inset(0 0 100% 0)",
  "inset(0 0 0 100%)"
];
const ACTIVE_CLASS = "is-active";

btnArrows.forEach(function (btn) {
  btn.addEventListener("click", function (e) {
    const activeSlide = slidesWrapper.querySelector(".slide.is-active");
    const activeSlideImgs = activeSlide.querySelectorAll("img");
    const activeSlideText = activeSlide.querySelectorAll(".text");
    let nextSlide = null;

    gsap.set(slideImgs, { clipPath: "inset(0 0 0 0)" });
    gsap.set(slideTexts, { opacity: 1 });

    if (e.currentTarget === btnArrowNext) {
      nextSlide = activeSlide.nextElementSibling
        ? activeSlide.nextElementSibling
        : firstSlide;
    } else {
      nextSlide = activeSlide.previousElementSibling
        ? activeSlide.previousElementSibling
        : lastSlide;
    }
    tl(nextSlide, activeSlide, activeSlideImgs, activeSlideText);
  });
});

function tl(
  nextActiveEl,
  currentActiveSlide,
  currentActiveSlideImgs,
  currentSlideActiveText
) {
  const tl = gsap.timeline({ onComplete });

  const randomClipPathOption = Math.floor(
    Math.random() * clipPathOptions.length
  );

  tl.to(currentActiveSlideImgs, {
    clipPath: clipPathOptions[randomClipPathOption]
  }).to(
    currentSlideActiveText,
    {
      opacity: 0,
      duration: 0.15
    },
    "-=0.5"
  );

  function onComplete() {
    currentActiveSlide.classList.remove(ACTIVE_CLASS);
    nextActiveEl.classList.add(ACTIVE_CLASS);
    counterSpan.textContent = slidesArray.indexOf(nextActiveEl) + 1;

    const nextSlideImgs = nextActiveEl.querySelectorAll("img");
    const nextSlideText = nextActiveEl.querySelectorAll(".text");
    const tl = gsap.timeline();

    tl.from(nextSlideImgs, {
      clipPath: clipPathOptions[randomClipPathOption]
    }).from(
      nextSlideText,
      {
        opacity: 0,
        duration: 0.15
      },
      "-=0.5"
    );
  }
}

// keyboard navigation
document.addEventListener("keyup", (e) => {
  console.log(e.key);
  if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
    // left arrow
    if (e.key === "ArrowLeft") {
      btnArrowPrev.click();
    } else {
      // right arrow
      btnArrowNext.click();
    }
  }
});

This Pen is owned by Envato Tuts+ on CodePen.

See more by @tutsplus on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://unpkg.com/gsap@3/dist/gsap.min.js