With out additional ado, right here’s what we’re going to create:
Please be aware that the slideshow isn’t optimized for cellular units. The uneven/damaged structure works greatest on massive screens, so you’ll want to view the demo from a big gadget. For cellular units, you may select to have a typical slideshow with a single picture and an overlay with some textual content above it.
This isn’t an introductory tutorial. All through the years, I’ve revealed varied tutorials the place I current GSAP intimately and focus on tips on how to animate the clip-path property. If you happen to aren’t acquainted sufficient with these items or want a refresher, I’d encourage you to test the tutorials under earlier than shifting ahead.
1. Start with the HTML markup
Inside a container, we’ll place:
- A listing of slides
- A component that can show the energetic slide index.
- The navigation arrows
We’ll assume that every slide will describe a home/condo for hire and embrace a title, some photographs, and a call-to-action button.
The place of those parts will differ and depend upon three layout-* courses (layout-a, layout-b, layout-c).
By default, the primary slide shall be seen because of the is-active class.
Right here’s the required markup usually:
1 |
<div class="slides-wrapper"> |
2 |
<ul class="slides"> |
3 |
<li class="slide layout-a is-active">...</li> |
4 |
<li class="slide layout-b">...</li> |
5 |
<li class="slide layout-c">...</li> |
6 |
</ul>
|
7 |
<div class="counter"><span>1</span> / 3</div> |
8 |
<div class="arrows-wrapper"> |
9 |
<button class="arrow arrow-prev" aria-label="Navigate to the earlier home">...</button> |
10 |
<button class="arrow arrow-next" aria-label="Navigate to the subsequent home">...</button> |
11 |
</div>
|
12 |
</div>
|
And extra particularly, the markup inside every slide will seem like this:
1 |
<determine class="img-wrapper img1-wrapper"> |
2 |
<img width="" top="" src="IMG_URL" alt=""> |
3 |
</determine>
|
4 |
<determine class="img-wrapper img2-wrapper"> |
5 |
<img width="" top="" src="IMG_URL" alt=""> |
6 |
</determine>
|
7 |
<determine class="img-wrapper img3-wrapper"> |
8 |
<img width="" top="" src="IMG_URL" alt=""> |
9 |
</determine>
|
10 |
<determine class="img-wrapper img4-wrapper"> |
11 |
<img width="" top="" src="IMG_URL" alt=""> |
12 |
</determine>
|
13 |
<h2 class="title textual content">...</h2> |
14 |
<a href="" class="btn-book textual content">...</a> |
2. Add the CSS
As typical, let’s consider the important thing kinds—we’ll go away the introductory ones for now.
First, we’ll use CSS Grid to stack all of the slides; at any time, solely the one with the is-active class will seem.
1 |
.slides-wrapper .slides { |
2 |
show: grid; |
3 |
}
|
4 |
|
5 |
.slides-wrapper .slide { |
6 |
grid-area: 1/1; |
7 |
opacity: 0; |
8 |
visibility: hidden; |
9 |
}
|
10 |
|
11 |
.slides-wrapper .slide.is-active { |
12 |
opacity: 1; |
13 |
visibility: seen; |
14 |
}
|
Every slide shall be a grid container with 20 columns and rows. Plus, every row could have a 5vh top.
1 |
.slides-wrapper .slide { |
2 |
show: grid; |
3 |
grid-template-rows: repeat(20, 5vh); |
4 |
grid-template-columns: repeat(20, 1fr); |
5 |
}
|
Subsequent, every slide merchandise will sit in a unique location based mostly on its grid-row and grid-column values. As well as, some slides’ gadgets will share the identical grid-row-end and grid-column-end values. These are all arbitrary, and you’ll change them as you would like.
1 |
.slides-wrapper .layout-a .img1-wrapper { |
2 |
grid-row: 1 / -1; |
3 |
grid-column: 1 / span 7; |
4 |
}
|
5 |
|
6 |
.slides-wrapper .layout-a .img2-wrapper { |
7 |
grid-row: 6 / span 5; |
8 |
grid-column: 16 / -1; |
9 |
}
|
10 |
|
11 |
.slides-wrapper .layout-a .img3-wrapper { |
12 |
grid-row: 8 / span 9; |
13 |
grid-column: 10 / span 5; |
14 |
}
|
15 |
.slides-wrapper .layout-a .img4-wrapper { |
16 |
grid-row: 15 / -1; |
17 |
grid-column: 17 / -1; |
18 |
}
|
19 |
.slides-wrapper .layout-a .title { |
20 |
grid-row-start: 7; |
21 |
grid-column-start: 1; |
22 |
}
|
23 |
|
24 |
.slides-wrapper .layout-a .btn-book { |
25 |
grid-row: 3; |
26 |
grid-column-start: 11; |
27 |
}
|
The photographs will completely match inside their cell because of the object-fit: cowl tremendous helpful CSS property.
1 |
.slides-wrapper img { |
2 |
width: 100%; |
3 |
top: 100%; |
4 |
object-fit: cowl; |
5 |
}
|
Lastly, the navigation-related gadgets shall be completely positioned and sit on the left and proper edges of the slideshow.
1 |
.slides-wrapper .counter, |
2 |
.slides-wrapper .arrows-wrapper { |
3 |
place: absolute; |
4 |
prime: 20px; |
5 |
}
|
6 |
|
7 |
.slides-wrapper .counter { |
8 |
left: 20px; |
9 |
}
|
10 |
|
11 |
.slides-wrapper .arrows-wrapper { |
12 |
proper: 20px; |
13 |
}
|
3. Add the JavaScript
At this level, we’re prepared so as to add interactivity to our slideshow.
Every time we click on on a navigation arrow, we’ll carry out the next actions:
- Seize the energetic slide and its gadgets.
- Be sure that all of the animated parts of our slideshow change into instantly seen by utilizing GSAP’s set() methodology. We do that to cancel any earlier inline kinds which might be utilized throughout the biking.
- Verify to see which button is clicked. If that’s the subsequent button, we’ll set the subsequent energetic slide because the one which instantly follows the present energetic slide. If there isn’t such a slide, the subsequent slide turns into the primary one. Equally, if the earlier button is clicked, we’ll set the subsequent slide because the one which instantly precedes the present energetic slide. If there isn’t such a slide, the subsequent slide turns into the final one.
- With all this information in place, we’ll name our
tl()operate the place we animate all of the slideshow gadgets.
Right here’s the required JavaScript code:
1 |
...
|
2 |
|
3 |
btnArrows.forEach(operate (btn) { |
4 |
btn.addEventListener("click on", operate (e) { |
5 |
// 1
|
6 |
const activeSlide = slidesWrapper.querySelector(".slide.is-active"); |
7 |
const activeSlideImgs = activeSlide.querySelectorAll("img"); |
8 |
const activeSlideText = activeSlide.querySelectorAll(".textual content"); |
9 |
let nextSlide = null; |
10 |
|
11 |
// 2
|
12 |
gsap.set(slideImgs, { clipPath: "inset(0 0 0 0)" }); |
13 |
gsap.set(slideTexts, { opacity: 1 }); |
14 |
|
15 |
// 3
|
16 |
if (e.currentTarget === btnArrowNext) { |
17 |
nextSlide = activeSlide.nextElementSibling |
18 |
? activeSlide.nextElementSibling |
19 |
: firstSlide; |
20 |
} else { |
21 |
nextSlide = activeSlide.previousElementSibling |
22 |
? activeSlide.previousElementSibling |
23 |
: lastSlide; |
24 |
}
|
25 |
// 4
|
26 |
tl(nextSlide, activeSlide, activeSlideImgs, activeSlideText); |
27 |
});
|
28 |
});
|
In fact, if we need to be safer, we are able to wait to run this code when all of the web page belongings load by way of the load occasion.
Contained in the tl() operate we’ll create a GSAP timeline that can disguise all the weather of the at present energetic slide concurrently. Most significantly, its photographs will disappear by animating their clip-path property. The attention-grabbing factor right here is that the animation motion will come from a random clip-path choice.
As quickly as this timeline finishes, we’ll register one other timeline that can present the weather of the brand new energetic slide once more directly. This time although, the related photographs will seem with an reverse slide animation. For instance, if the earlier photographs are clipped from left to proper, these will seem from proper to left.
Right here’s the signature of this operate:
1 |
operate tl( |
2 |
nextActiveEl, |
3 |
currentActiveSlide, |
4 |
currentActiveSlideImgs, |
5 |
currentSlideActiveText
|
6 |
) { |
7 |
const tl = gsap.timeline({ onComplete }); |
8 |
|
9 |
const randomClipPathOption = Math.flooring( |
10 |
Math.random() * clipPathOptions.size |
11 |
);
|
12 |
|
13 |
tl.to(currentActiveSlideImgs, { |
14 |
clipPath: clipPathOptions[randomClipPathOption] |
15 |
}).to( |
16 |
currentSlideActiveText, |
17 |
{
|
18 |
opacity: 0, |
19 |
period: 0.15 |
20 |
},
|
21 |
"-=0.5" |
22 |
);
|
23 |
|
24 |
operate onComplete() { |
25 |
currentActiveSlide.classList.take away(ACTIVE_CLASS); |
26 |
nextActiveEl.classList.add(ACTIVE_CLASS); |
27 |
counterSpan.textContent = slidesArray.indexOf(nextActiveEl) + 1; |
28 |
|
29 |
const nextSlideImgs = nextActiveEl.querySelectorAll("img"); |
30 |
const nextSlideText = nextActiveEl.querySelectorAll(".textual content"); |
31 |
const tl = gsap.timeline(); |
32 |
|
33 |
tl.from(nextSlideImgs, { |
34 |
clipPath: clipPathOptions[randomClipPathOption] |
35 |
}).from( |
36 |
nextSlideText, |
37 |
{
|
38 |
opacity: 0, |
39 |
period: 0.15 |
40 |
},
|
41 |
"-=0.5" |
42 |
);
|
43 |
}
|
44 |
}
|
Add keyboard help
Simply to boost the performance of our slideshow, we’ll add help for keyboard navigation. That mentioned, every time the left (←) or proper (→) arrow keys are pressed, we’ll set off a click on to the earlier and subsequent navigation arrows respectively.
Right here’s the related code:
1 |
doc.addEventListener("keyup", (e) => { |
2 |
console.log(e.key); |
3 |
if (e.key === "ArrowLeft" || e.key === "ArrowRight") { |
4 |
// left arrow
|
5 |
if (e.key === "ArrowLeft") { |
6 |
btnArrowPrev.click on(); |
7 |
} else { |
8 |
// proper arrow
|
9 |
btnArrowNext.click on(); |
10 |
}
|
11 |
}
|
12 |
});
|
Conclusion
Executed! Throughout this tutorial, we have been actually artistic and discovered to construct an animated GSAP slideshow whose slides consist of various distinctive uneven layouts.
Hopefully, you appreciated the ensuing demo and can use it as inspiration to create your individual damaged grid JavaScript slideshows 🙏.
As at all times, thanks lots for studying!
