Sidebar menu for scrolljacking section and odd scrolling behavior

[DilionS]

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!

See the Pen QWBPLzK?editors=1000 by DilionsCode (@DilionsCode) on CodePen

[Rodrigo]

Hi,

 

Is there any difference between this thread and this other thread you also created?:

If is the same issue, I already answered you there. Let me know so I can delete this thread and keep our focus on the other one please.

 

For future references, please don't create duplicated threads or post comments in other threads once you created your own. We do our best to answer to all the users within 24 hours, so be sure that you will get an answer for your GSAP related questions.

 

Happy Tweening!

[DilionS]

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 

[Rodrigo]

Hi,

 

There is a lot of people around in the forums more than willing to help you with your GSAP related questions. On top of Cassie, Jack and myself, we have a great group of moderators that solve issues with a lot of ease every day and provide guidance to every user that requires it in their own free time.

 

If you need to hire someone you can also head towards the Jobs & Freelance sub-forum and create a thread with your requirements there:

https://greensock.com/forums/forum/15-jobs-freelance/

 

Happy Tweening!