Build an asymmetric JavaScript slideshow with CSS Grid & GSAP

Without further ado, here’s what we’re going to create:

<br />

Please note that the slideshow isn’t optimized for mobile devices. The asymmetric/broken layout works best on large screens, so be sure to view the demo from a large device. For mobile devices, you can choose to have a standard slideshow with a single image and an overlay with some text above it.

This isn’t an introductory tutorial. Throughout the years, I’ve published various tutorials where I present GSAP in detail and discuss how to animate the clip-path property. If you aren’t familiar enough with this stuff or need a refresher, I’d encourage you to check the tutorials below before moving forward.

1. Begin with the HTML markup

Inside a container, we’ll place:

A list of slides

An element that will display the active slide index.

The navigation arrows

We’ll assume that each slide will describe a house/apartment for rent and include a title, some images, and a call-to-action button.

The position of these elements will differ and depend on three layout-* classes (layout-a, layout-b, layout-c).

By default, the first slide will be visible thanks to the is-active class.

Here’s the required markup in general:

 class="slides-wrapper">
  
     class="slide layout-a is-active">...
     class="slide layout-b">...
     class="slide layout-c">...
  
   class="counter">1 / 3
   class="arrows-wrapper">
     class="arrow arrow-prev" aria-label="Navigate to the previous house">...
     class="arrow arrow-next" aria-label="Navigate to the next house">...
  


And more specifically, the markup inside each slide will look like this:

 class="img-wrapper img1-wrapper">
   width="" height="" src="IMG_URL" alt=""> 

 class="img-wrapper img2-wrapper">
   width="" height="" src="IMG_URL" alt="">

 class="img-wrapper img3-wrapper">
   width="" height="" src="IMG_URL" alt="">

 class="img-wrapper img4-wrapper">
   width="" height="" src="IMG_URL" alt="">

 class="title text">...
 href="" class="btn-book text">...

2. Add the CSS

As usual, let’s concentrate on the key styles—we’ll leave the introductory ones for now.

First, we’ll use CSS Grid to stack all the slides; at any time, only the one with the is-active class will appear.

.slides-wrapper .slides {
  display: grid;
}

.slides-wrapper .slide {
  grid-area: 1/1;
  opacity: 0;
  visibility: hidden;
}

.slides-wrapper .slide.is-active {
  opacity: 1;
  visibility: visible;
}

Each slide will be a grid container with 20 columns and rows. Plus, each row will have a 5vh height.

.slides-wrapper .slide {
  display: grid;
  grid-template-rows: repeat(20, 5vh);
  grid-template-columns: repeat(20, 1fr);
}

Next, each slide item will sit in a different location based on its grid-row and grid-column values. In addition, some slides’ items will share the same grid-row-end and grid-column-end values. These are all arbitrary, and you can change them as you wish.

.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;
}

The images will perfectly fit inside their cell thanks to the object-fit: cover super useful CSS property.

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

Lastly, the navigation-related items will be absolutely positioned and sit on the left and right edges of the slideshow.

.slides-wrapper .counter,
.slides-wrapper .arrows-wrapper {
  position: absolute;
  top: 20px;
}

.slides-wrapper .counter {
  left: 20px;
}

.slides-wrapper .arrows-wrapper {
  right: 20px;
}

3. Add the JavaScript

At this point, we’re ready to add interactivity to our slideshow.

Each time we click on a navigation arrow, we’ll perform the following actions:

Grab the active slide and its items.

Make sure that all the animated elements of our slideshow become immediately visible by using GSAP’s set() method. We do this to cancel any previous inline styles that are applied during the cycling.

Check to see which button is clicked. If that’s the next button, we’ll set the next active slide as the one that immediately follows the current active slide. If there isn’t such a slide, the next slide becomes the first one. Similarly, if the previous button is clicked, we’ll set the next slide as the one that immediately precedes the current active slide. If there isn’t such a slide, the next slide becomes the last one.

With all this knowledge in place, we’ll call our tl() function where we animate all the slideshow items.

Here’s the required JavaScript code:

...

btnArrows.forEach(function (btn) {
  btn.addEventListener("click", function (e) {
    // 1
    const activeSlide = slidesWrapper.querySelector(".slide.is-active");
    const activeSlideImgs = activeSlide.querySelectorAll("img");
    const activeSlideText = activeSlide.querySelectorAll(".text");
    let nextSlide = null;

    // 2
    gsap.set(slideImgs, { clipPath: "inset(0 0 0 0)" });
    gsap.set(slideTexts, { opacity: 1 });

    // 3
    if (e.currentTarget === btnArrowNext) {
      nextSlide = activeSlide.nextElementSibling
        ? activeSlide.nextElementSibling
        : firstSlide;
    } else {
      nextSlide = activeSlide.previousElementSibling
        ? activeSlide.previousElementSibling
        : lastSlide;
    }
    // 4
    tl(nextSlide, activeSlide, activeSlideImgs, activeSlideText);
  });
});

Of course, if we want to be safer, we can wait to run this code when all the page assets load via the load event.

Inside the tl() function we’ll create a GSAP timeline that will hide all the elements of the currently active slide simultaneously. Most importantly, its images will disappear by animating their clip-path property. The interesting thing here is that the animation movement will come from a random clip-path selection.

As soon as this timeline finishes, we’ll register another timeline that will show the elements of the new active slide again at once. This time though, the associated images will appear with an opposite slide animation. For example, if the previous images are clipped from left to right, these will appear from right to left.

Here’s the signature of this function:

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

Add keyboard support

Just to enhance the functionality of our slideshow, we’ll add support for keyboard navigation. That said, each time the left (←) or right (→) arrow keys are pressed, we’ll trigger a click to the previous and next navigation arrows respectively.

Here’s the relevant code:

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();
    }
  }
});

Conclusion

Done! During this tutorial, we’ve been really creative and learned to build an animated GSAP slideshow whose slides consist of different unique asymmetric layouts.

<br />

Hopefully, you liked the resulting demo and will use it as inspiration to create your own broken grid JavaScript slideshows 🙏.

As always, thanks a lot for reading!

Source link

Hosting Discounts

cloudways Discount
August 21, 2022
Hostinger Discount
August 21, 2022
DreamHost Discount
August 31, 2020