How to create an awesome Image gallery using GSAP ScrollTrigger
Tags: html, css, javascript, beginners
Published: 2021-06-03 15:26:27

***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**: <a href="https://blog.stackfindover.com/how-to-create-a-parallax-scrolling-effect/">Hulk Parallax Scrolling Effect</a>

```html
<!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:

```html
<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
```html
<!-- 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

```css
* {
  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`

```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
{% youtube LyseF7yBLfc %}