Jump to content
Search Community

Is there a way to scroll horizontally in a css grid gallery using only gsap?

JustinNobles test
Moderator Tag

Recommended Posts

I was wondering if I can horizontally scroll through an image gallery with css grid using scrolltrigger? I would like to scroll using my own custom scrollbar, and or be able to scroll horizontally using the mousewheel through the gallery! Also, if possible have it loop where it goes back when I scroll past the last images back to the first images of the grid that would be a plus! Most importantly let there be no visible default scrollbar shown! I see so many tutorials focusing on flexbox and or 1 page sliders where each child element of the parent div is on another slide, but that won't work as I have my gallery in a 3 x 3 layout instead of a 1 x 9 layout. Also, I have seen tutorials with gsap + scrollmagic but I would rather not use scrollmagic if I don't need to with scrolltrigger. Would love and appreciate the help! I am still pretty new to javascript & GSAP in general, but I have looked through so many tutorials, downloaded plugins, etc. and nothing has really worked for me to the point where I feel like I can move on, especially when I know most of what I am looking for is on websites like this http://www.jeanhelfenstein.com/ 

See the Pen WNwxbZo by JustinNobles (@JustinNobles) on CodePen

Link to comment
Share on other sites

Hey Justin and welcome to the GreenSock forums. I recommend that you take things one step at a time - you have several questions listed. 

 

8 minutes ago, JustinNobles said:

if possible have it loop where it goes back when I scroll past the last images back to the first images of the grid that would be a plus!

By this I assume you mean if you keep scrolling right then numbers 1, 4, and 7 appear on the right of 3, 6, and 9? CSS grid actually makes this harder because you'd have to move things around in the DOM. If you just positioned your columns absolutely then it'd be easier - you can use modifiers to wrap:

 

10 minutes ago, JustinNobles said:

I was wondering if I can horizontally scroll through an image gallery with css grid using scrolltrigger?

Sure, just set horizontal: true and make sure the scroller is set to your element with the scrollbar.

 

10 minutes ago, JustinNobles said:

Most importantly let there be no visible default scrollbar shown!

There are different techniques for hiding the scrollbar. Some browsers let you just hide it with CSS. The most reliable is to position the scrollbar out of view.

 

12 minutes ago, JustinNobles said:

I would rather not use scrollmagic if I don't need to with scrolltrigger.

There are no circumstances that I'm aware of where you'd need to use ScrollMagic over ScrollTrigger. ScrollTrigger is waaay better :) 

  • Like 2
Link to comment
Share on other sites

@ZachSaucier thanks for the reply and to the css grid loop question yes! That is what I am looking for is where I see the numbers 1 4 and 7 on the right of the last numbers. I have a basic grid example in the demo. My actual grid for my project is way more complex as it has clip paths so I would rather not absolute position things if I had to choose haha

Link to comment
Share on other sites

@ZachSaucier Interesting, I am assuming the first link you sent me can guide me with that looping images. I know I dropped a couple questions, but I wasn't expecting this fast of a reply haha. At the core of my question, I just want to scroll horizontally with the above code in the demo. I have seen a lot of tutorials, demos, or plugins break if you hide the default scrollbar, but most of the gsap tutorials didn't when the scrollbar was hidden which is awesome. If you could help me build on what I have in the codepen to move the gallery horizontally on mousewheel, I would greatly appreciate it!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...