Building a Modern Approach to a Photo Gallery with Smooth Scroll and Scroll-Activated Animations

Are you looking to take your photo gallery to the next level and make it more impressive and fun to use? Look no further than this tutorial, where we'll be building a modern photo gallery equipped with smooth scroll and scroll-activated animations.

To accomplish this, we'll be using Lennis, a new smooth scroll solution, and the GreenSock animation platform along with the ScrollTrigger plugin. So let's buckle up and get started!

The HTML

The HTML for this photo gallery is straightforward. We'll first create a section to create the two vertical lines, which will serve as tracks for the photographs to stay along. Then, we'll add the HTML for the actual photographs themselves, using CSS background images to place those images.

We'll then take our sections and convert them to an equal width three-column grid, giving our actual gallery section a height of 200 viewport heights to make the gallery larger. For our individual images, we'll give them a position relative so that we can use a pseudo before-element to continue the vertical lines with position absolute. We'll use the nth-of-type selector to place each individual background image, and add a class for the vertical lines.

The JavaScript

To bring our photo gallery to life, we'll be using JavaScript. First, we need to import Lennis, GreenSock, and the ScrollTrigger plugin. We'll then register the ScrollTrigger plugin from GreenSock and create an instance of Lennis. Lennis comes with various options that you can explore in their documentation.

At this point, our project should look like this:

Now, we'll use GreenSock and ScrollTrigger to create our scroll-activated animations. We'll create an instance of the timeline and define the scroll-trigger on the image class. This means that the animations we define in GreenSock will only activate once the images come into the viewport. We'll set scrub to true, which allows the animations to only take place based on the scroll position.

Final Thoughts

And there you have it! With just a bit of HTML, CSS, and JavaScript, we were able to create a modern photo gallery with smooth scroll and scroll-activated animations.

If you want to level up your UI/UX or CSS skills, be sure to check out DesignCourse.com, my new custom interactive platform for becoming all things awesome. Let me know your thoughts in the comments, and I'll see you soon!