Jump to content
Search Community

ScrollTrigger & ScrollSmoother Scroll Snapping Issue

wrighttw test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

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

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

  • Solution

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.

 

  • Like 3
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...