Jump to content
Search Community

Burger Menu with ScrollTrigger and ScrollSmooth

phillip_vale test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi!

 

New Shockingly Green member and diving in the deep end with ScrollTrigger and Scroll Smoother amongst other things.

I'm trying to create a burger menu that opens up a nav, reveals a link and then once clicked closes the menu and scrolls to the corresponding section.

 

All good so far with the burger animation and the scroll trigger square in section three.

I'm just a bit stuck adding the menu link and integrating the scroll smoother action.

 

Sort of like the 'Jump to C' button behaves in the ScrollSmoother example.

 

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

 

Thank you, any help is much appreciated.

 

Cheers,

Phil

See the Pen QWBwdQq by phillipanthonyvale (@phillipanthonyvale) on CodePen

Link to comment
Share on other sites

10 minutes ago, phillip_vale said:

Just a question, how does it know which section to go to?

Right here:

gsap.utils.toArray("#menu a").forEach(el => {
  let linkTo = document.querySelector(el.getAttribute("data-link")),
      st = ScrollTrigger.create({trigger: linkTo, start: "top top"}); // create a ScrollTrigger just to track the location of the linkTo element, including pinning, etc.
  el.addEventListener("click", event => {
    event.preventDefault(); // don't let the browser jump to the link
    gsap.set("body", {overflow: "scroll"});
    gsap.to(window, {scrollTo: st.start, overwrite: "auto"});
  });
});

Jack is creating a ScrollTrigger instance for each section and then getting the start value of that particular ScrollTrigger instance. Finally it passed that to the ScrollTo plugin which creates the scroll animation.

 

I updated the codepen example in order to close the menu as well:

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

 

Let us know if you have more questions.

Happy Tweening!

Link to comment
Share on other sites

Nice one, thanks so much.

Ok gotcha! And the data-link is the same as the class! i.e. data-link=".one"

 

Just a few further questions sorry:

 

- Can i change the order of the menu closing? i.e. The menu closes and then scrolls to the relevant section.

- If i open and close the menu without clicking on a menu link the browser won't scroll.

- Once the menu item is clicked the nav loses it's fixed position.

 

Again, thanks for all the help.

 

Cheers,

Phil

 

 

Link to comment
Share on other sites

  • Solution

There's a fundamental problem with the way you set things up because whenever you have a position: fixed element that's INSIDE of an element that has any transform applied, then position: fixed becomes relative to that container element with a transform. I has nothing to do with GSAP - it's just a CSS thing. So you've got your menu and nav inside the "#main" which you're applying an x transform to. That makes it almost impossible to get the effect you want (although you could do some fancy offsets with JS dynamically, but that feels more like a hack to me). The proper way (in my opinion) is to change your markup so that those elements are outside the "#main" element, like this: 

 

See the Pen eYjGJBe?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is that more like the effect you wanted? 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...