Today, I'm going to show you how to build this modern approach to a photo gallery, fully equipped with smooth scroll and scroll-activated animations.
When compared to the stripped down version, it's just not as impressive and as nice and fun to use.
The tools of choice for this tutorial are:
- Lenis, which is a new smooth-scroll solution
- The GreenSock animation platform, along with their ScrollTrigger plugin.
So, let's buckle up and get started!
HTML
The HTML for this is very straight forward. We're going to first create a section to create the 2 vertical lines, which serve as sort of tracks that the photographs will stay along..
And then the HTML for the actual photographs themselves, and we'll be using CSS background images to place those images.
CSS
This is the first ruleset, which is a ruleset that the smooth-scroll library Lenis, suggests placing.
After that, we'll take our sections and convert them to an equal width 3 column grid.
We'll give our actual gallery section a height of 200 viewport height in order to make our gallery larger.
For our individual images, we're going to give them position relative so that we can use the psuedo before element to continue those vertical lines with position absolute in a second..
We'll use nth-of-type to place each individual background image.
And here's that bit for placing the 2 vertical lines.
Finally, here's the line class.
JavaScript
Now for the JavaScript.. First, we need to import lenis. Then we'll import greensock, and finally we'll import greensock's scrolltrigger plugin.
First, we need to register the ScrollTrigger plugin.
Then, we'll create an instance of Lenis. It comes with a bunch of options, so I suggest checking out their docs.
These next two bits are Lenis boilerplate for getting the smooth-scroll up and running.
At this point, this is what your project should look like.
Now, the last part involves greensock and scrolltrigger. First, we create an instance of the timeline, and then define the scrolltrigger on the .img class. This means that the animations we define in greensock will only activate once the images come into view in the viewport.
We also set scrub to true, which allows the animations to only take place based on the scroll position.
Now we define the animation with the to method. Setting a stagger will create a stagger animation with .2 seconds between each image moving up on the y axis by 700 pixels. We'll also set scrub to true here as well.
And that's it folks! Here's the final product. All of the source code is available in the youtube description here, so check it out and let me know your thoughts.