I'm trying to achieve a horizontal scrolling effect similar to what you see on the GSAP homepage. So far, I've set up my layout with three slides for the scrolling components. However, I'm facing a couple of issues: 1. On mobile devices, the scrolling speed is way too fast. 2. On larger screens, the text gets clipped. I've got a video that shows off my problems here: https://youtu.be/XgbdnlW5qV0. Any advice on how to fix these issues or suggestions for improving my site would be really helpful!
2 Answers
To create that horizontal scroll effect, you can definitely look at using JavaScript animations. A common approach is building out elements with something like a carousel or slideshow component. That said, if you're aiming for a GSAP-like effect, you might want to dig deeper into scroll snapping using CSS for smoother transitions.
Check out the new library called Lenis from Darkroom, it's designed for smoother scrolling and might help with your performance issues!
Yeah, I'm actually steering clear of carousel/slideshow vibes and trying to nail that specific GSAP desktop style instead.