lauxpaux

Hi there, 

Apologies to have disappeared I had a project for school that required all of my attention but now I'm back trying to figure this out. I don't understand the functionality  of in the code for the nav bar you provided. Do you mind explaining how it works? 

I attached the codepen of the codes combined. My goal is to have nine sections altogether counting the landing page and to scroll or fade into the corresponding section once the nav link is clicked. 

See the Pen ZEWjKXQ by lauxpaux (@lauxpaux) on CodePen

59 minutes ago, ZachSaucier said:

Hey lauxpaux and welcome to the GreenSock forums.

 

Normally in situations like this you can just calculate the y offset of the container of your sections and add that to the x offset of each section. Then scrollTo that position. Something along the lines of this:

const sectionContainer = document.querySelector(".section-container");
const navLinks = gsap.utils.toArray(".nav-link a");
navLinks.forEach(link => {
  link.addEventListener("click", e => {
    // Prevent the default behavior
    e.preventDefault();

    // Get the element
    const section = document.querySelector(link.getAttribute("href"));
    // Get the scroll position
    const pos = sectionContainer.offsetTop + section.offsetLeft;
    // Scroll to it
    gsap.to(window, {scrollTo: pos});
  });
});

However if you try that in your project, it won't work correctly because your tween that moves things horizontally is not a one-for-one animation (meaning it moves further than it actually scrolls). Is that intentional? If it isn't you can just change your animation to work one-for-one and the above should work. If it is intentional then the solution becomes a bit more complex. Let me know what you need.

 

Side note: I recommend that you use the <nav> element for your .nav-link container.

Hi, 

Thank you so much for your response. I'm not sure what you mean by "it moves further than it actually scrolls. Can you clarify that for me? 

Thanks!

Hello, I'm pretty new at this and this is my first post so I'll try to be as clear as possible but bare with me please.

The codepen attached is essentially what I want to do for this site in terms of functionality. I'm struggling with the menu portion because it is a horizontal website and I can't just add the ids to the href. I tried using scrollTo but I haven't had any luck so I'm wondering if someone can help me. 

The idea is to have the menu flow throughout all the sections in a sticky-like position. When you click on one of the menu links it sends you to the corresponding section regardless of where you are on the website. Right now I'm thinking scrollTo but I'm open to other methods/animations as long as it takes you to the particular sections which is what I can't figure out. I'd appreciate any help. Thanks!

See the Pen bGpLrdZ by lauxpaux (@lauxpaux) on CodePen