Alien Posted May 10, 2023 Share Posted May 10, 2023 How to create the menu with smooth scroll navigation? See the Pen YzJeRKB by redbad (@redbad) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted May 10, 2023 Share Posted May 10, 2023 Hi there! Could you give your question a bit more context? It's not very clear what you're asking. Thanks Link to comment Share on other sites More sharing options...
Alien Posted May 10, 2023 Author Share Posted May 10, 2023 I had create the navigation to link each section and it's work to click to scroll to the section but when click the home button, it can't scroll to the section keep stay in the Section 01. Link to comment Share on other sites More sharing options...
Rodrigo Posted May 10, 2023 Share Posted May 10, 2023 Hi, The issue is that the calculations ScrollTrigger is making here when creating the linkST instances: let menu = gsap.utils.toArray(".nav a"); menu.forEach((a) => { let element = document.querySelector(a.getAttribute("href")), linkST = ScrollTrigger.create({ trigger: element, start: "top top" }); a.addEventListener("click", (e) => { e.preventDefault(); gsap.to(window, { duration: 1, scrollTo: linkST.start, overwrite: "auto" }); }); }); Are being affected by the ScrollTrigger instances created in the panels loop. Since you know that the home section is at the top of the document just use zero there: a.addEventListener("click", (e) => { e.preventDefault(); const target = e.target.getAttribute("href") === "#home" ? 0 : linkST.start; gsap.to(window, { duration: 1, scrollTo: target, overwrite: "auto", }); }); Finally is worth noticing that pinType : "sticky" is not an option. It's either "fixed" or "transform" pinType "fixed" | "transform" - by default, position: fixed is used for pinning only if the scroller is the <body>, otherwise transforms are used (because position: fixed won't work in various nested scenarios), but you can force ScrollTrigger to use position: fixed by setting pinType: "fixed". Typically this isn't necessary or helpful. Beware that if you set the CSS property will-change: transform, browsers treat it just like having a transform applied, breaking position: fixed elements (this is unrelated to ScrollTrigger/GSAP). Hopefully this helps. Happy Tweening! 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