Burger Menu with ScrollTrigger and ScrollSmooth

[phillip_vale]

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.

[GreenSock]

Welcome to the club! ??

 

Do you mean like this?: 

See the Pen MWBvVKa?editors=0010 by GreenSock (@GreenSock) on CodePen.

[phillip_vale]

That's perfect! Thank you.

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

 

Also, do you know how to 'close' the menu once a link is clicked? i.e. Reversing the menu opening sequence with the 'burger' to 'cross' animation.
Would this need to be in a timeline?

[Rodrigo]

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!

[phillip_vale]

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

 

 

[GreenSock]

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? 

[phillip_vale]

This is perfect! thanks so much for all of your help Jack & Rodrigo!