DEV Community

Cover image for How to create an awesome Image gallery using GSAP ScrollTrigger
Stackfindover
Stackfindover

Posted on

How to create an awesome Image gallery using GSAP ScrollTrigger

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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`;
Enter fullscreen mode Exit fullscreen mode

Final Result

Top comments (0)