CSS scroll to anchor or ScrollToPlugin with ScrollSmoother

[mafl]

Hello,

I'm working on a site and having a problem with integrating GSAP's "ScrollSmoother" while I could still use the CSS "scroll to anchor" feature, which would be triggered when one of the submenu items is clicked. Unfortunately, it seems that "ScrollSmoother" blocks this css feature.
I tried to solve this by using "ScrollToPlugin" and not using CSS at all. But this has one important problem, it only works on the web page to which the submenu belongs. When I click on a submenu from another page, the navigation to the page with the anchor does not work. I understand that GSAP does not support Cross-Page Navigation, but I don't know how to solve this problem.
Using CSS, it is usually possible to navigate from one page to another by clicking on a submenu item.
It would be great if GSAP didn't block this behavior.
Is there a way out?

[GSAP Helper]

In order for ScrollSmoother to work its magic, it MUST fundamentally separate the visual "scrolling" of the content (which is just animating its translateY) from the actual native scrolling of the page itself. There are pros and cons to this approach. The up side is that it works with all native scrolling techniques (dragging the scrollbar, hitting the spacebar, arrow key, setting it directly via JavaScript, etc.). The down side is that it can't logically work with the browser's native "find" feature where it jumps to certain spots in the content. And what I think you're describing is also a consequence of this approach, but I'm not sure because you didn't provide a minimal demo for us to look at. 

 

If you're just trying to scroll to a certain spot based on a URL parameter or something, that should be pretty easy to do with ScrollSmoother - it has a scrollTo() method that you can feed an element to. So you could add a little JavaScript that grabs the URL parameter and plugs it in accordingly. 

 

Or you could try Lenis which takes a different approach that doesn't accommodate all those native ways of scrolling - they primarily just intercept wheel events, but it would allow things like the "find" feature to work. Obviously Lenis isn't a GreenSock product, so we can't really support it here but my understanding is that it works great with GSAP and ScrollTrigger. 

 

 

If you still need help, please provide a minimal demo that clearly illustrates the challenge. 

 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[mafl]

Thank you very much for the very good explanation.
In the end, a combination of Lenis and GSAP together seems to be the best solution.
I still have to fix a small detail and that is the "scroll to" behavior, but I'm glad that it basically works.