Hello guys, In this article we will learn how to create an awesome Image gallery using GSAP ScrollTrigger
Step 1 — Creating a New Project
In this step, we need to create a new project folder and files(index.html, style.css, main.js) for creating an awesome image gallery. In the next step, you will start creating the structure of the webpage.
Step 2 — Setting Up the basic structure
In this step, we will add the HTML code to create the basic structure of the project.
See Also: Hulk Parallax Scrolling Effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to create an awesome Image gallery using GSAP ScrollTrigger</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
This is the base structure of most web pages that use HTML.
Add the following code inside the <body> tag:
<div class="gallery-container">
<div class="gallery">
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer centerPiece">
<div class="galleryBlock centerBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
<div class="galleryLayer">
<div class="galleryBlock"></div>
</div>
</div>
</div>
In the next steps, we will add the JS library and main.js file
Step 3 — Add Gsap ScrollTrigger library and js file
<!-- Gsap ScrollTrigger-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"
integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"
integrity="sha512-Q+G390ZU2qKo+e4q+kVcJknwfGjKJOdyu5mVMcR95NqL6XaF4lY4nsSvIVB3NDP54ACsS9rqhE1DVqgpApl//Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- -->
<script src="main.js" charset="utf-8"></script>
Step 4 — Adding Styles for the Classes
In this step, we will add styles to the section class Inside style.css file
* {
padding: 0;
margin: 0;
}
body {
overflow-x: hidden;
}
.galleryBlock {
opacity: 0;
}
.gallery-container {
width: 100vw;
height: 400vh;
position: relative;
}
.gallery {
top: 0;
left: 0;
z-index: 1;
width: 70vw;
height: 60vw;
margin: 0 calc(100vw / 20 * 3);
position: absolute;
}
.galleryBlock {
background-size: cover;
background-color: darkgray;
}
.galleryLayer {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
will-change: transform;
transform-origin: 44.951% 50%;
}
.galleryLayer:nth-child(1) .galleryBlock {
top: 5vw;
left: 20vw;
width: 10vw;
height: 10vw;
}
.galleryLayer:nth-child(2) .galleryBlock {
top: 0;
left: 32.5vw;
width: 15vw;
height: 15vw;
}
.galleryLayer:nth-child(3) .galleryBlock {
left: 0;
top: 25vw;
width: 15vw;
height: 15vw;
}
.galleryLayer:nth-child(4) .galleryBlock {
top: 17.5vw;
left: 17.5vw;
width: 30vw;
height: 30vw;
}
.galleryLayer:nth-child(5) {
z-index: 1;
}
.galleryLayer:nth-child(5) .galleryBlock {
top: 20vw;
left: 50vw;
width: 5vw;
height: 5vw;
}
.galleryLayer:nth-child(6) .galleryBlock {
left: 50vw;
top: 27.5vw;
width: 20vw;
height: 20vw;
}
.galleryLayer:nth-child(7) .galleryBlock {
left: 10vw;
top: 42.5vw;
width: 5vw;
height: 5vw;
}
.galleryLayer:nth-child(8) .galleryBlock {
bottom: 5vw;
left: 42.5vw;
width: 5vw;
height: 5vw;
}
.galleryLayer:nth-child(9) .galleryBlock {
bottom: 0;
left: 50vw;
width: 10vw;
height: 10vw;
}
.galleryBlock {
display: block;
position: absolute;
}
@media only screen and (max-width: 580px) {
.galleryLayer:nth-child(6) .galleryBlock {
top: 43.889vw;
left: 73.889vw;
width: 26.389vw;
height: 26.389vw;
}
.galleryLayer:nth-child(7) .galleryBlock {
display: none;
}
.galleryLayer:nth-child(8) .galleryBlock {
display: none;
}
.galleryLayer:nth-child(9) .galleryBlock {
top: 73.889vw;
left: 58.889vw;
width: 15.278vw;
height: 15.278vw;
}
.galleryLayer:nth-child(1) .galleryBlock {
top: 11.111vw;
left: 23.889vw;
width: 15vw;
height: 15vw;
}
.gallery {
margin: 0;
width: 100vw;
height: 89.444vw;
}
.galleryLayer:nth-child(5) svg {
width: 4.722vw;
}
.galleryLayer:nth-child(5) .galleryBlock {
top: 23.889vw;
left: 73.889vw;
width: 15.278vw;
height: 15.278vw;
}
.galleryLayer:nth-child(4) .galleryBlock {
top: 30.278vw;
left: 30.278vw;
width: 39.444vw;
height: 39.444vw;
}
.galleryLayer:nth-child(2) .galleryBlock {
top: 0;
left: 43.333vw;
width: 26.389vw;
height: 26.389vw;
}
.galleryLayer:nth-child(3) .galleryBlock {
top: 30.278vw;
left: 0;
width: 26.389vw;
height: 26.389vw;
}
}
Step 4 — Adding Js Code
In the final step we have to do code for main.js
gsap.timeline({
scrollTrigger: {
trigger: ".gallery-container",
start: "top top",
end: () => innerHeight * 4,
scrub: true,
pin: ".gallery",
anticipatePin: 1
}
})
.set(".galleryBlock:not(.centerBlock)", { autoAlpha: 0 })
.to(".galleryBlock:not(.centerBlock)", { duration: 0.1, autoAlpha: 1 }, 0.001)
.from(".gallery-layer", {
scale: 3.333,
ease: "none"
})
const size = Math.max(innerWidth, innerHeight);
gsap.set('.galleryBlock', { backgroundImage: i => `url(https://picsum.photos/${size}/${size}?random=${i})` });
const bigImg = new Image;
bigImg.addEventListener("load", function () {
gsap.to(".center-layer .centerBlock", { autoAlpha: 1, duration: 0.5 });
});
bigImg.src = `https://picsum.photos/${size}/${size}?random=50`;
Final Result
Top comments (0)