DilionS

So here is my code for scrollTo functionality now: // Smooth scrolling on anchor links document.querySelectorAll(".scrollNav a").forEach((btn, index) => { btn.addEventListener("click", (e) => { e.preventDefault(); var sectionNum = "#section" + (index + 1); var divHeight = $(sectionNum).height(); // Get Height of section inside #scrollArea var scrollHeight = $(sectionNum).offset().top - (divHeight); // create offset with the top console.log(sectionNum + ":" + scrollHeight); gsap.to(window, { duration: 2, scrollTo: { y: scrollHeight, // pass the final calculation ease:Power2.easeOut, autoKill: true, } }); }); }); Only issue that I'm having is that if the user goes down to section five but wants to return to a section above it; the calculation isn't working right. Trying to combat this right now and figure out why that is. Can someone please tell me if my calculation is wrong? or how I'm inputting said calculation is the issue? Thank you!

Hey Rodrigo, Just another update. I'm pretty certain now that I have to use the offset Y to create the calculation for it to land properly on the section! Thank you!

Hey Rodrigo, So this does indeed answer my question but I'm still left with one more problem now is that it's scroll past the sections. Which you said there is some calculations errors that I'll have to figure out. Currently trying to figure out about how I calculate those and get it land on the section it was clicked on. What should I be reading in the docs? Updated code: https://codepen.io/DilionsCode/full/QWBPLzK Thank you, Dilion Smith

Hey Rodrigo, Yes that thread is related to the same issue. I wanted to delete it but didn't see an option. Your help has been tremendous! I'm working today on those calculations to get it to go to each section steadily. Can I reach you on here on the forums regularly? If so I'd like to keep your contact info because I'll more than likely hire someone for this next time. Thank you, Dilion Smith

Hey everyone, So as you'll see I have a sidebar menu that when you click on the anchors it scrolls to the section. However the entire menu moves when you click on the anchor. I'm imagining this might be caused by the fact the navigation bar is inside the scrollAreaWrapper and scrollContent div. So either there is something I'm missing or I need to move the navigation somewhere else. Any guidance or help would be appreciated. Thank you, Dilion Smith

Hey everyone, GSAP has been an amazing tool to use for animations! So far I've created a lot of things that I never thought was possible with it! My only issue is that I'm trying to do more advance stuff with it and it's getting pretty hectic and I need some guidance. So as you'll see on the CodePen link I have a scrolljacking section that I'm making for a website that has a sidebar navigation. Now the issue is that I want it to be able to be clicked on and scroll to that section. But the entire navigation menu moves when one of the anchors are clicked on. What I believe is that because "navContainer" is inside the same div as "scrollContent" that's why it's moving around. So I'm trying to improvise something to keep that menu on the left. Which I was using this snippet of code for the navigation menu links using ScrollSmoother: gsap.registerPlugin(ScrollSmoother); let smoother = ScrollSmoother.create({ smooth: 1 }); gsap.utils.toArray(".scrollNav a").forEach(function (button, i) { button.addEventListener("click", (e) => { var id = e.target.getAttribute("href"); console.log(id); smoother.scrollTo(id, true, "top top"); e.preventDefault(); }); }); Now the scrollTrigger really confuses me because #scrollArea is inside the "scrollContent" div. Which is why I'm thinking the pin isn't working. Whenever the user scrolls down it should pin and not unpin until the user scrolls till they see the bottom of the last section. Any help would be appreciated with this! Thank you so much!