wrighttw Posted May 3, 2022 Share Posted May 3, 2022 ScrollTrigger was working great with scroll snapping. Then, I added the ScrollSmoother plugin and I can't get the snapping to work again. Is it possible to use ScrollSmoother with ScrollTrigger and achieve the snapping functionality? If not, I suppose I could create a custom animated ScrollTo function for this. See the Pen mdXyMMZ by tylerwwright (@tylerwwright) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted May 3, 2022 Share Posted May 3, 2022 Welcome to the forums @wrighttw Your demo seems to be snapping for me, but maybe I'm missing something. 🤷♂️ If you're trying to CSS snapping to work with ScrollSmoother, I wouldn't expect that work as it's not using the document's normal scroll. Everything gets translated up. And if you're just doing sections like, I'm not sure I understand the need for ScrollSmoother, let alone ScrollTrigger if there's scrolling. If you're just want to react to mouse-like events, you can use the new Observer plugin. See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
wrighttw Posted May 3, 2022 Author Share Posted May 3, 2022 Hi @OSUblake! Thanks for the quick reply! I understand the confusion as the project is in the beginning stages. However, my goal is to replicate the behavior of Gamer Moms. The reason why it's working in my codepen is because, like you said, ScrollSmoother is overtaken by CSS and is not smoothing at all. Once I iron out this issue I plan to add numerous ScrollTrigger animations once the sections are reached and snapped to. Does that make sense? Here is the mockup if that helps. I could be going about this all wrong, but my plan was to use the smoother to make the transitions and animations less choppy for ScrollTrigger. Link to comment Share on other sites More sharing options...
Solution OSUblake Posted May 3, 2022 Solution Share Posted May 3, 2022 Yes, it makes sense. We get questions like this all the time, and they almost always end up with a very convoluted solution. To me it doesn't make sense to use ScrollTrigger or ScrollSmoother if you can't freely scroll around the page. Stuff tends to end up glitching, just like that site you linked to. https://gyazo.com/b2735d1e2be31a22482345465f27a742 I would recommend checking out the Observer docs and that demo. ScrollSmoother is just translating the smooth-content section up and down. You can do the same with the Observer by animating some container and even trigger custom animations when it animates into position. 3 Link to comment Share on other sites More sharing options...
wrighttw Posted May 3, 2022 Author Share Posted May 3, 2022 Great! Thank you @OSUblake. I think I just needed to know if it was possible and efficient to do it that way and you cleared that up for me. Appreciate the quick responses. 2 Link to comment Share on other sites More sharing options...
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