JustinNobles Posted August 17, 2020 Posted August 17, 2020 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.
ZachSaucier Posted August 17, 2020 Posted August 17, 2020 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 2
JustinNobles Posted August 17, 2020 Author Posted August 17, 2020 @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
ZachSaucier Posted August 17, 2020 Posted August 17, 2020 Most likely changing the positioning to something that works more easily with wrapping would be your best option. You could also consider duplicating the entire grid (or at least as much as will ever be on screen at the same time as the last part of your grid). 1
JustinNobles Posted August 17, 2020 Author Posted August 17, 2020 @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!
ZachSaucier Posted August 17, 2020 Posted August 17, 2020 There are a few demos doing that in the ScrollTrigger docs. Applied to your demo: See the Pen xxVOEdJ?editors=0110 by GreenSock (@GreenSock) on CodePen. 1
JustinNobles Posted August 17, 2020 Author Posted August 17, 2020 @ZachSaucier Awesome that is so close to what I need! How could I make it where it scrolls all the to the very last div while not fluctuating on the y-axis when scrolled?
ZachSaucier Posted August 17, 2020 Posted August 17, 2020 Do you mean like this? See the Pen NWNrRzb?editors=0100 by GreenSock (@GreenSock) on CodePen. 2
JustinNobles Posted August 17, 2020 Author Posted August 17, 2020 @ZachSaucier basically but without the scrollbar div moving up
ZachSaucier Posted August 17, 2020 Posted August 17, 2020 Just include the scrollbar in the part you're pinning. 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now